javascript - React ref 嵌套组件

Question

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

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

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

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

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

代码沙箱链接: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 :