У меня есть 2 компонента, и я хочу, чтобы Panel_Menu элемент был в другом дочернем компоненте, чтобы что-то с ним сделать.

 class Panel extends Component {
    constructor(props){
        super(props);

        this.menuRef = React.createRef();  
    }

    componentDidMount() {
        console.log (this.menuRef.current)
        // works correctly
    }

    render() {
        return(
            <>
                <Panel_Menu className="panel-menu" ref={this.menuRef}>
                    <Menu item={this.menuRef.current}/>
                </Panel_Menu>
            </>
        )
    }
}
 

 class Menu extends Component {
    constructor(props) {
        super(props);

    }

    isSame = () => {
        const isSlideClass = this.props.item;
        console.log(isSlideClass)
        // is null
        // expected output: → <div class="panel-menu"></div>
    }

    render() {
        return (
            <Left_Menu >
                <Panel_Menu_Items className="test" onClick={this.isSame} />
            </Left_Menu>
        );
    }
}
 

Как я могу обновить данные, render() чтобы достичь своей цели?

Или… как я могу мгновенно получить элемент во внешнем компоненте (в данном случае меню), чтобы что-то с ним сделать?

Вопрос

Проблема здесь в том, что ссылки React, прикрепленные при первоначальном рендеринге, будут не определены во время первоначального рендеринга. Это означает, что item={this.menuRef.current} в обработчике щелчка дочернего элемента будет заключено начальное неопределенное значение ref.

Решение

Это просто, вам действительно просто нужно вызвать повторный запрос, чтобы повторно включить обновленное значение React ref. Вы можете либо добавить некоторое состояние в Panel компонент и обновить его в методе componentDidMount жизненного цикла, либо просто выполнить принудительное обновление.

 class Panel extends Component {
  menuRef = createRef();

  componentDidMount() {
    console.log(this.menuRef.current);
    this.forceUpdate(); // <-- trigger rerender manually
  }

  render() {
    return (
      <>
        <PanelMenu className="panel-menu" ref={this.menuRef}>
          <Menu item={this.menuRef.current} />
        </PanelMenu>
      </>
    );
  }
}
 

ДЕМОНСТРАЦИЯ