Question

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

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

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

这是由于以下事实：子组件需要根据传递的参数有很大不同，但是，它也需要在整个应用程序中重用，因此createChild函数可确保所有子组件给定相同的输入，child组件是相同的。

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

代码沙箱链接：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（至少没有明确地传递），而在于创建控件的方式（不允许传递引用）。

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

A link to a working code sandbox

React ref嵌套组件

2 个答案: