React ref 嵌套组件答案

【问题标题】：React ref a nested componentReact ref 嵌套组件
【发布时间】：2018-08-24 12:46:41
【问题描述】：

我遇到了一个我不知道如何“正确”解决的问题。

我有两个组件，我们称它们为parent 和child。
child 组件是通过调用创建它的函数“生成”的，我们称这个函数为child creator。 parent 组件有一个按钮，它显示/隐藏child，但也假设.focus() HTML dom 节点是子节点。现在我通过状态实现了显示/隐藏，但我不知道如何将javascript的.focus()应用到孩子的HTML dom节点上。

还有一个小问题...child 组件正在通过调用一个普通的旧 javascript 函数来“生成”和“返回”，我们称之为createChild。

这是因为子组件需要根据传递的参数有很大的不同，但是，它还需要在整个应用程序中重用，因此createChild 函数确保所有 @ 987654334@ 组件是相同的，给定相同的输入。

我尝试将ref 传递给创建者，但是由于ref 不是道具，因此无法访问。由于我无法传递ref，因此在单击按钮时“抓取”子节点的 dom 节点以便.focus() 它们的正确方法是什么？

代码沙箱链接：https://codesandbox.io/s/lyj6x2948m

【问题讨论】：

你能提供一些codesandbox中的代码或一些类似的服务吗？
您可以将ref 作为道具传递。你试过了吗？
@devserkan 你不能，因为创建者是一个普通的函数，React 不允许它
@LazarNikolic codesandbox.io/s/lyj6x2948m
编辑您的问题以包含代码框

标签： javascript reactjs ref

【解决方案1】：

是的，child ref 是可访问的，因为它是真实 DOM 的一部分。我用两个嵌套组件做了一个简单的例子，看看：

class Parent extends React.Component {
  focusRef(ref) {
    ref.focus();
  }
  
  render() {
    return <Child focusRef={this.focusRef} />
  }
};

class Child extends React.Component {
  render() {
    return (
      <button 
        ref={childRef => this.childRef = childRef}
        onMouseEnter={() => this.props.focusRef(this.childRef)}
      >
        When mouse enters, i get focused
      </button>
    );
  }  
}

ReactDOM.render(
  <Parent />,
  document.getElementById("root")
);

*:focus {
  outline: 2px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

另外，我强烈建议您进一步阅读react docs：

【讨论】：

我的意思是，您的示例与我所描述的示例之间存在巨大差异，例如，您正在对从孩子触发的事件做出反应，显然，您可以从内部引用孩子并仅传递它回到父母那里，父母想用它做什么。这个例子根本没有真正说明问题，两者都没有。事件触发器需要发生在父元素上，并且必须关注子元素，并且由于 focus 不是属性，因此据我所知，它是不可通过的，请检查我制作的代码框链接。
其次，您将一个孩子实例化为一个类，而我正在使用一个普通的旧javascript函数来生成一个反应组件并将其作为一个孩子返回，这可以将ref作为一个道具传递，如果那是通过反应来完成的，但它不是。如果您有更好的解决方案，我愿意接受建议
我误解了你的问题，对此我深表歉意。致力于改进的解决方案 =)

【解决方案2】：

好吧，大家都想知道，我找到了解决问题的方法。首先，问题不在于 ref 传递（至少不是明确地），而是在某种方式上正在创建控件（这不允许传递 ref）。

controlCreator 函数是一个很好的老式简单 javascript 函数，它被用来为 React.createElement 提供类型，因为调用 controlCreator 的结果最终成为一个反应组件。
然而，我已经理解为什么这是错误的，而是通过controlCreator 生成我的child 元素，然后使用React.cloneElement 将ref 注入它们。通过这种方式，元素被克隆到父级中，因此可以被父级的方法引用。

A link to a working code sandbox

【讨论】：