时间戳

首页 > 解决方案 > React ref 嵌套组件

javascript - React ref 嵌套组件

问题描述

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

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

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

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

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

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

标签： javascriptreactjsref

解决方案

是的，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：

推荐阅读