【问题标题】：How can I import element to another React component?如何将元素导入另一个 React 组件？
【发布时间】：2021-06-11 16:12:25
【问题描述】：

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

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

【问题讨论】：

问题不清楚。您只需要在其他组件中导入PANEL_MENU 并渲染它吗？ “它在第二次点击时获取元素但 console.logs”是什么意思？我在您的代码中没有看到 onClick 处理程序。 “如何更新 done render() 中的数据以达到我的目标？”这是 React 中的反模式，render 方法是一个纯函数。您要更新哪些数据？您提到一些其他文件...请在您的问题中包含所有相关代码。
我已经完成更新以清除我的代码和问题。

标签： reactjs react-ref

【解决方案1】：

问题

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

演示

【讨论】：