Как прокинуть ссылку ref в другой компонент?

Question

[Сергей]

Здравствуйте.

Есть два разных компонента. Необходимо реализовать подобный функционал:

class App extends React.Component {
  bottomRef = React.createRef();

  onClick = () => {
    this.bottomRef.current.scrollIntoView();
  };

  render() {
    return (
      <div>
        <button onClick={this.onClick}>Scroll to bottom</button>
        <div style={{ height: 2000 }} />
        <div ref={this.bottomRef}>bottom</div>
      </div>
    );
  }
}

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

Только реф ссылка и кнопка на которую вешают обработчик в разных компонентах и так что пропсами не прокинуть. Какие могут быть варианты еще сделать?

P.S. На сколько зашкварно заюзать getElementById в реакт компоненте и какие могут быть подводные камни с точки зрения оптимизации данного подхода?

Answer 1

[Евгений Щербаков]

Вам нужно использовать либо forwardRef, либо передать ref через пропсы (только имя пропса использовать не ref, а например innerRef)

Предпочтительнее и правильнее будет первый вариант.
https://ru.reactjs.org/docs/forwarding-refs.html#f...

Comments

[Сергей]

а что поделать если это не дочерний компонент?

[Евгений Щербаков]

Сергей, тогда наверно нужно думать о структуре.