如何向容器传递属性处理函数，实现React兄弟组件通信？

1. 父组件添加状态控制方法并传递给子组件 #

在ParentComponent中定义修改shouldResetFocus状态的方法，将其作为props传递给FooterContainer。同时为避免重复触发焦点逻辑，可在触发后自动重置状态：

export class ParentComponent extends React.Component<IParentComponentProps, any> {
  constructor(props: IParentComponentProps) {
    super(props);
    this.state = {
      shouldResetFocus: false,
    };
  }

  // 定义状态修改方法，支持传入布尔值，触发后自动重置为false
  handleResetFocus = (value: boolean) => {
    this.setState({ shouldResetFocus: value }, () => {
      if (value) {
        setTimeout(() => {
          this.setState({ shouldResetFocus: false });
        }, 0);
      }
    });
  };

  public render() {
    return (
      <>
        <BodyComponent shouldResetFocus={this.state.shouldResetFocus} />
        {/* 把状态控制方法传递给FooterContainer */}
        <FooterContainer onResetFocus={this.handleResetFocus} />
      </>
    );
  }
}

2. 更新FooterComponent的props接口 #

在IFooterComponentProps中添加状态控制方法的定义，确保类型匹配：

export interface IFooterComponentProps {
  // 原有props定义
  // ...
  // 添加状态控制方法
  onResetFocus: (value: boolean) => void;
}

3. 调整FooterComponent触发逻辑 #

修改FooterComponent的按钮点击事件，调用父组件传递过来的方法修改状态：

export class FooterComponent extends React.Component<IFooterComponentProps> {
  render() {
    // 注意onClick传递函数引用，不要直接调用
    return <button onClick={this.onBtnClick}>重置焦点</button>;
  }

  onBtnClick = () => {
    // 原有业务逻辑
    // ...

    // 触发焦点重置
    this.props.onResetFocus(true);
  };
}

4. FooterContainer无需额外修改 #

connect包裹的容器组件会自动将父组件传入的onResetFocus props透传给内部的FooterComponent，原有代码保持不变即可：

const mapStateToProps = (state: IAppState, _ownProps: any) => {
 return {
  // 原有状态映射
 };
};

const mapDispatchToProps = {
  // 原有dispatch映射
};

export const FooterContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(styled(FooterComponent, getStyles));

核心逻辑说明 #

兄弟组件间的通信通过父组件作为中间层实现：

• 父组件持有共享状态shouldResetFocus
• 父组件提供状态修改方法，传递给触发事件的子组件（Footer相关）
• 状态变化通过props传递给响应逻辑的子组件（BodyComponent），在其生命周期中处理焦点重置操作

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