компонент focus детей с использованием createRef не работает

Question

У меня есть это в качестве родителя

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

, и мой Hello похож на

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

, но я всегда получаю {value: null}

demo https://codesandbox.io/s/7wo7qvkq8j

Answer 1

A ref не является стандартной опорой.Вы можете изменить его на что-то другое (myRef) или использовать ref forwarding :

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

Узел: ref forwarding работает с React 16.3 (не альфа)) и выше.

Демонстрация ( песочница ):

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

Вы должны изменить ref на другое слово из-за конфликта с специальными реквизитами .Смотрите мой отредактированный код: https://codesandbox.io/s/82m5lzy4vj

Но я рекомендую не передавать ref через реквизит.Вы можете создать ссылку на этот компонент и контролировать его.