如何将元素导入另一个 React 组件？

如何解决如何将元素导入另一个 React 组件？

我有 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>
        );
    }
}

如何更新 done render() 中的数据以实现我的目标？

或者...如何在外部组件（本例中为菜单）中立即获取元素以对其进行处理？

解决方法

问题

这里的问题是当 React refs 附加到初始渲染时，在初始渲染期间 将是未定义的。这意味着 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>
      </>
    );
  }
}

演示