如何避免重复向React子组件传递相同的事件处理函数props？

当然有办法解决这个问题啦！你现在每次使用Popup都要重复传递closePoPup props，这在React开发里是很常见的冗余场景，我们可以通过以下几种方式优化，让代码更简洁易维护：

方案1：让Popup组件内部管理关闭状态（适合独立弹窗） #

如果你的弹窗显示/隐藏逻辑不需要和父组件的其他状态联动，完全可以把状态迁移到Popup组件内部，让它自己负责关闭逻辑。这样父组件不用再传关闭方法，只需要控制初始显示即可：

class Popup extends React.Component {
  state = { isVisible: true };

  handleClose = (e) => {
    e.preventDefault();
    this.setState({ isVisible: false });
    // 如果父组件需要监听关闭事件，可通过回调通知
    this.props.onClose?.();
  };

  render() {
    if (!this.state.isVisible) return null;
    
    return (
      <div className={this.props.classes}>
        <h2>{this.props.title}</h2>
        <button onClick={this.handleClose}>关闭弹窗</button>
        {this.props.children}
      </div>
    );
  }
}

父组件使用时就简化成这样，仅在需要额外处理时传递onClose：

{(this.state.renderProgramePoPup ? 
  <Popup 
    title="程序弹窗" 
    classes="popup-style" 
    onClose={() => this.setState({ renderProgramePoPup: false })}
  >
    <SimplePopUp />
  </Popup> : null )}

方案2：封装业务专属的Popup组件（最适合你的场景） #

因为你在父组件里有两个弹窗，关闭逻辑都是把对应状态设为false，完全可以封装一个和当前业务绑定的自定义弹窗，把重复的关闭逻辑封装进去：

// 在ProjectForm组件内部定义自定义弹窗
const ProjectPopup = ({ title, classes, children, type }) => {
  const handleClose = (e) => {
    e.preventDefault();
    this.setState({
      [`render${type}PoPup`]: false
    });
  };

  return (
    <Popup title={title} classes={classes} closePoPup={handleClose}>
      {children}
    </Popup>
  );
};

之后父组件使用时就不用再重复写closePoPup了，只需要指定弹窗类型：

{(this.state.renderProgramePoPup ? 
  <ProjectPopup title="程序弹窗" classes="popup-style" type="Programe">
    <SimplePopUp />
  </ProjectPopup> : null )}

{(this.state.renderTreeListPoPup ? 
  <ProjectPopup title="树列表弹窗" classes="popup-style" type="TreeList">
    <TreeList />
  </ProjectPopup> : null )}

方案3：使用React Context（适合全局多组件场景） #

如果你的弹窗会在很多不同层级的组件中使用，且关闭逻辑关联的状态是全局的，可以用Context来传递关闭方法，避免层层传递props：

首先创建Context：

const PopupContext = React.createContext();

在父组件中提供Context：

class ProjectForm extends React.Component {
  state = {
    renderProgramePoPup: false,
    renderTreeListPoPup: false
  };

  handleClosePopup = (e, type) => {
    e.preventDefault();
    this.setState({
      [`render${type}PoPup`]: false
    });
  };

  render() {
    return (
      <PopupContext.Provider value={{ closePopup: this.handleClosePopup }}>
        <div>
          {/* 弹窗使用区 */}
          {(this.state.renderProgramePoPup ? 
            <Popup title="程序弹窗" classes="popup-style" type="Programe">
              <SimplePopUp />
            </Popup> : null )}
        </div>
      </PopupContext.Provider>
    );
  }
}

修改原Popup组件，从Context中获取关闭方法：

class Popup extends React.Component {
  static contextType = PopupContext;

  render() {
    const handleClose = (e) => {
      this.context.closePopup(e, this.props.type);
    };

    return (
      <div className={this.props.classes}>
        <h2>{this.props.title}</h2>
        <button onClick={handleClose}>关闭</button>
        {this.props.children}
      </div>
    );
  }
}

这样无论在哪个组件使用Popup，只要在PopupContext的范围内，都不需要手动传递关闭方法了。

针对你的具体场景，方案2应该是最直接高效的，因为它完全贴合你当前的业务逻辑，能快速消除代码冗余。

内容的提问来源于stack exchange，提问作者Hayi