javascript - 使用 createRef 的焦点子组件不起作用

Question

我有这个作为 parent

class TestRef extends React.Component {
  ref = React.createRef();
  render() {
    return <Hello ref={this.ref} />;
  }
}

我的Hello就是这样

export default ({ ref }) => <input ref={ref} />;

但我总是得到 {value: null}

演示 https://codesandbox.io/s/7wo7qvkq8j

Answer 1

ref 不是标准 Prop 。您可以将其更改为其他内容 (myRef)，或使用 ref forwarding :

const Hello = React.forwardRef((props,  ref) => <input ref={ref} />);

节点: ref 转发适用于 React 16.3(非 alpha)及更高版本。

演示(sandbox):

const Hello = React.forwardRef((props,  ref) => <input ref={ref} />);

class TestRef extends React.Component {

  ref = React.createRef();
  
  componentDidMount() {
    console.log(this.ref);
    
    this.ref.current.focus(); // example of using the ref
  }
  
  render() {
    return <Hello ref={this.ref} />;
  }
}

ReactDOM.render(<TestRef />, document.getElementById("root"));

<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="root"></div>