React组件间通信：父组件状态管理与跨层级函数传递

import React from 'react';

interface IParentComponentProps {
  // 父组件的其他props
}

export class ParentComponent extends React.Component<IParentComponentProps, { shouldResetFocus: boolean }> {
  constructor(props: IParentComponentProps) {
    super(props);
    this.state = {
      shouldResetFocus: false, // 初始化共享状态
    };
    // 绑定 `handleReset` 方法的 `this` 上下文，确保在子组件中调用时能正确访问父组件实例
    this.handleReset = this.handleReset.bind(this);
  }

  /**
   * 用于更新 shouldResetFocus 状态的回调函数
   * @param reset 布尔值，指示是否需要重置焦点
   */
  handleReset(reset: boolean) {
    this.setState({
      shouldResetFocus: reset,
    });
  }

  public render() {
    return (
      <>
        {/* 将 shouldResetFocus 状态传递给 BodyComponent */}
        <BodyComponent shouldResetFocus={this.state.shouldResetFocus} />
        {/* 将 handleReset 回调函数传递给 FooterContainer */}
        <FooterContainer handleReset={this.handleReset} />
      </>
    );
  }
}

// FooterComponent 的 props 接口
interface IFooterComponentProps {
  handleReset: (reset: boolean) => void; // 声明 handleReset prop
  // 其他可能由 Redux connect 或自身定义的 props
}

export class FooterComponent extends React.Component<IFooterComponentProps> {
  /**
   * 按钮点击事件处理函数
   */
  onBtnClick = () => {
    // 其他业务逻辑
    console.log('按钮被点击，触发焦点重置');
    // 调用父组件传递的回调函数，将 shouldResetFocus 设为 true
    this.props.handleReset(true);
  };

  render() {
    return (
      <button onClick={this.onBtnClick}>
        重置焦点
      </button>
    );
  }
}

// FooterContainer 的 Redux 连接部分
// 这里无需为 handleReset prop 做任何额外的 Redux 映射
// const mapStateToProps = (state: IAppState, _ownProps: any) => { /* ... */ };
// const mapDispatchToProps = { /* ... */ };
// export const FooterContainer = connect(
//   mapStateToProps,
//   mapDispatchToProps
// )(styled(FooterComponent, getStyles));

import React from 'react';

export interface BodyComponentProps {
  shouldResetFocus: boolean; // 接收来自父组件的焦点重置状态
}

class BodyComponent extends React.Component<BodyComponentProps> {
  private containerRef = React.createRef<HTMLDivElement>();

  componentDidUpdate(prevProps: BodyComponentProps) {
    // 检查 shouldResetFocus prop 是否从 false 变为 true
    if (this.props.shouldResetFocus && !prevProps.shouldResetFocus) {
      const nextFocusableElement = this.containerRef?.current;
      if (nextFocusableElement) {
        nextFocusableElement.focus(); // 执行焦点重置操作
        // 注意：如果需要一次性重置，可能需要在此处调用父组件的回调将 shouldResetFocus 设回 false
        // 例如：this.props.resetFocusComplete(); // 假设父组件提供了这样的回调
      }
    }
  }

  render() {
    let body = (
      // 一些主体内容逻辑
      <div>
        这是Body组件的内容，当shouldResetFocus为true时，它将获得焦点。
      </div>
    );
    return (
      <div tabIndex={0} ref={this.containerRef} style={{ border: '1px solid blue', padding: '10px' }}>
        {/* <BackButtonContainer /> */}
        {body}
      </div>
    );
  }
}