React中如何从子组件/DOM元素调用父组件的方法？

这个问题其实很常见，核心就是要把父组件的方法传递给嵌套的子组件，这里给你两种实用的解决方案，对应不同的场景：

方案一：通过React.Children.map给子组件传递方法 #

因为DrawerItem是作为children传入ToggleDrawer的，我们可以在ToggleDrawer的render方法里遍历这些子组件，给每个DrawerItem手动添加closeBtn属性，把父组件的closeDrawer方法传递进去。

修改ToggleDrawer组件： #

class ToggleDrawer extends React.PureComponent {
  // 用箭头函数自动绑定this，避免后续bind操作
  closeDrawer = () => {
    this.ref.hide();
  };

  render() {
    // 遍历子组件，给每个DrawerItem注入closeBtn方法
    const enhancedChildren = React.Children.map(this.props.children, child => {
      // 只给DrawerItem组件添加属性，避免影响其他可能的子组件
      if (child.type === DrawerItem) {
        return React.cloneElement(child, {
          closeBtn: this.closeDrawer
        });
      }
      return child;
    });

    return (
      {/* 保留你原来的ToggleDrawer结构，把children替换成处理后的enhancedChildren */}
      <div className="toggle-drawer-container">
        {/* 你的其他渲染内容，比如触发按钮等 */}
        {enhancedChildren}
      </div>
    );
  }
}

修改DrawerItem组件： #

现在你就能在DrawerItem的props里拿到closeBtn方法了，给点击事件绑定这个方法即可：

class DrawerItem extends React.PureComponent {
  handleItemClick = () => {
    // 调用父组件传递过来的关闭方法
    if (this.props.closeBtn) {
      this.props.closeBtn();
    }
  };

  render() {
    console.log(this.props); // 现在能看到closeBtn方法了
    return (
      <div className="drawer-item" onClick={this.handleItemClick}>
        <BinaryLink to={this.props.link_to}>
          <span>{this.props.text}</span>
        </BinaryLink>
      </div>
    );
  }
}

方案二：使用React Context（适合多层嵌套场景） #

如果后续你的组件层级变得更复杂（比如DrawerItem外面还有其他嵌套组件），用Context会更灵活，不用一层一层传递props。

步骤1：创建Context #

const DrawerContext = React.createContext();

步骤2：在ToggleDrawer中提供Context值 #

class ToggleDrawer extends React.PureComponent {
  closeDrawer = () => {
    this.ref.hide();
  };

  render() {
    return (
      <DrawerContext.Provider value={{ closeDrawer: this.closeDrawer }}>
        {/* 原来的渲染内容，包括子组件 */}
        {this.props.children}
      </DrawerContext.Provider>
    );
  }
}

步骤3：在DrawerItem中消费Context #

class DrawerItem extends React.PureComponent {
  // 绑定Context类型
  static contextType = DrawerContext;

  handleItemClick = () => {
    // 直接从context中获取closeDrawer方法
    this.context.closeDrawer();
  };

  render() {
    return (
      <div className="drawer-item" onClick={this.handleItemClick}>
        <BinaryLink to={this.props.link_to}>
          <span>{this.props.text}</span>
        </BinaryLink>
      </div>
    );
  }
}

总结 #

• 如果你只是当前的简单父子嵌套关系，方案一更直接、易理解；
• 如果未来组件层级会变复杂，方案二能避免“props drilling”（属性层层传递）的问题。

内容的提问来源于stack exchange，提问作者merry-go-round