Question

我以此为父母

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不是标准道具。您可以将其更改为其他名称（myRef），也可以使用ref forwarding：

const Hello = React.forwardRef((props,  ref) => <input 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>

Answer 2

由于与special props的冲突，您应将ref更改为另一个单词。查看我编辑的代码：https://codesandbox.io/s/82m5lzy4vj

但我建议您不要通过道具传递参考。您可以在该组件上创建引用并对其进行控制。

使用createRef的焦点子组件无效

2 个答案: