React 引用嵌套组件

Question

我运行遇到了一个我不知道如何 "properly" 解决的问题。

我有两个组件，我们称它们为 parent 和 child。
child 组件是 "generated" 通过调用创建它的函数，让我们称这个函数为 child creator。 parent 组件有一个按钮 shows/hides child 但也假设 .focus() HTML dom 节点是 child 是。现在 show/hide 我通过状态实现，但我不知道如何将 javascript 的 .focus() 应用到 child 的 HTML dom节点.

还有一个小问题... child 组件通过调用一个普通的旧 javascript 函数被 "generated" 和 "returned" 调用，让我们调用它 createChild.

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

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

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

Answer 1

是的，子引用是可访问的，因为它是真实 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：

Answer 2

好的，对于所有想知道的人，我找到了解决问题的方法。首先，问题不在于 ref 传递（至少不是明确的），而是在于创建控件的方式（不允许传递 ref）。

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

A link to a working code sandbox

React 引用嵌套组件

React ref a nested component

javascript

ref

reactjs