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

Question

这是我的组件逻辑：

component_1
     |
     '------component_2

我在component_2里有一个输入，我想把.focus()放在上面，但是component_1里有这个功能，我怎么办？我认为它会做参考，如果我错了请纠正我。

Answer 1

从 React 16.3 开始，您可以使用 React.createRef() in Component1 and pass it to the input via Component2 using ref forwarding:

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 中通过 props 传递 ref？

How to pass ref by props in ReactJs?

ref

reactjs

react-props