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

Question

我有 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() 以达到我的目标？

或者...我怎样才能立即在外部组件（在本例中为菜单）中获取元素以使用它做一些事情？

Answer 1

问题

这里的问题是，当 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>
      </>
    );
  }
}

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

How can I import element to another React component?

reactjs

react-ref

问题

解决方案

演示