React组件通信：通过父组件回调函数实现兄弟组件间状态同步与焦点控制

// ParentComponent.tsx
import React from 'react';
import { BodyComponent, BodyComponentProps } from './BodyComponent';
import { FooterContainer } from './FooterContainer';

interface IParentComponentProps {
  // ... 其他父组件属性
}

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 (
      <>
        {/* BodyComponent 接收 shouldResetFocus 状态 */}
        <BodyComponent shouldResetFocus={this.state.shouldResetFocus} />
        {/* FooterContainer 接收 handleReset 回调函数 */}
        <FooterContainer handleReset={this.handleReset} />
      </>
    );
  }
}

// FooterContainer.tsx
import { connect } from 'react-redux';
import styled from 'styled-components'; // 假设使用 styled-components
import { FooterComponent, IFooterComponentProps } from './FooterComponent'; // 导入 FooterComponent

// 假设的 Redux 状态接口
interface IAppState {
  // ... 其他 Redux 状态
}

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

const mapDispatchToProps = {
  // Redux dispatch 映射
};

// FooterContainer 接收来自父组件的 handleReset prop，并将其传递给 FooterComponent
export const FooterContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(styled(FooterComponent, getStyles)); // getStyles 假设为 styled-components 的样式函数

// FooterComponent.tsx
import React from 'react';

// 定义 FooterComponent 的 props 接口，包含 handleReset 方法
export interface IFooterComponentProps {
   handleReset: (reset: boolean) => void; // 回调函数的类型定义
   // ... 其他 FooterComponent 属性
}

export class FooterComponent extends React.Component<IFooterComponentProps> {
   /**
    * 按钮点击事件处理函数
    */
   onBtnClick = () => {
     // 其他逻辑...

     // 调用父组件传递下来的 handleReset 方法，将 shouldResetFocus 设置为 true
     this.props.handleReset(true);
   }

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

// BodyComponent.tsx
import React from 'react';
import { BackButtonContainer } from './BackButtonContainer'; // 假设有这个组件

export interface BodyComponentProps {
  shouldResetFocus: boolean;
}

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

    componentDidUpdate(prevProps: BodyComponentProps) {
      // 当 shouldResetFocus 从 false 变为 true 时，重置焦点
      if (this.props.shouldResetFocus && !prevProps.shouldResetFocus) {
        const nextFocusableElement = this.containerRef.current;
        if (nextFocusableElement) {
          nextFocusableElement.focus(); // 设置焦点
        }
      }
    }

    render () { 
      let body = <p>这里是主体内容</p>; // 模拟一些主体逻辑
      return (
        <div tabIndex={0} ref={this.containerRef}>
          {<BackButtonContainer />}
          {body}
        </div>
      );
    }
}