Question

这是我的组件逻辑：

component_1
     |
     '------component_2

我在component_2中有一个输入，我想在其上放.focus（），但是要执行此操作的函数在component_1中，我该怎么做？而且我认为它将做推荐，如果我错了，请纠正我。

Answer 1

从React 16.3开始，您可以在Component1中使用React.createRef()，并使用ref forwarding通过input将其传递到Component2：

const Component2 = React.forwardRef((props, ref) => (
  <input ref={ref} />
));

class Component1 extends React.Component { 
  ref = React.createRef();

  componentDidMount() {
    setTimeout(() => this.ref.current.focus(), 1000);
  }
  render() {
    return <Component2 ref={this.ref} />;
  }
}

ReactDOM.render(
  <Component1 />, 
  document.getElementById('demo')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>

如何在ReactJs中通过prop传递ref？

1 个答案: