React组件间通信实践：通过父组件管理兄弟组件状态

import React from 'react';
import { BodyComponent, BodyComponentProps } from './BodyComponent'; // 假设路径
import { FooterContainer } from './FooterContainer'; // 假设路径

// 定义父组件的 props 接口
interface IParentComponentProps {
  // 父组件可能接收的其他 props
}

// 定义父组件的 state 接口
interface IParentComponentState {
  shouldResetFocus: boolean;
}

export class ParentComponent extends React.Component<IParentComponentProps, IParentComponentState> {
  constructor(props: IParentComponentProps) {
    super(props);
    this.state = {
      shouldResetFocus: false, // 初始化焦点重置状态
    };
    // 绑定回调函数到当前实例，确保 'this' 上下文正确
    this.handleReset = this.handleReset.bind(this);
  }

  /**
   * 处理焦点重置逻辑的回调函数
   * @param reset 指示是否应该重置焦点
   */
  handleReset(reset: boolean) {
    console.log(`ParentComponent: Setting shouldResetFocus to ${reset}`);
    this.setState({
      shouldResetFocus: reset,
    });
  }

  public render() {
    return (
      <>
        {/* BodyComponent 接收 shouldResetFocus 状态作为 prop */}
        <BodyComponent shouldResetFocus={this.state.shouldResetFocus} />
        {/* FooterContainer 接收 handleReset 回调函数作为 prop */}
        <FooterContainer handleReset={this.handleReset} />
      </>
    );
  }
}

// ParentComponent 的 render 方法
public render() {
   return (
      <>
         <BodyComponent shouldResetFocus={this.state.shouldResetFocus} />
         {/* 将 handleReset 函数作为 prop 传递给 FooterContainer */}
         <FooterContainer handleReset={this.handleReset} />
      </>
   );
}

import React from 'react';
import { connect } from 'react-redux';
// import { styled } from '@emotion/styled'; // 如果使用 styled-components 或 emotion

// 定义 FooterComponent 的 props 接口
// 包含从父组件传递下来的 handleReset 回调函数
interface IFooterComponentProps {
   handleReset: (reset: boolean) => void;
   // 其他可能的 props，例如 Redux 映射的 props
}

export class FooterComponent extends React.Component<IFooterComponentProps> {
   // 使用箭头函数定义事件处理程序，自动绑定 'this'
   onBtnClick = () => {
     console.log('FooterComponent: Button clicked, calling handleReset(true)');
     // 调用父组件传递下来的回调函数，将 shouldResetFocus 设置为 true
     this.props.handleReset(true);
     // 假设还有其他逻辑
   }

   render () {
     return (
       <button onClick={this.onBtnClick} style={{ padding: '10px', margin: '10px', backgroundColor: 'lightgreen' }}>
         点击重置焦点
       </button>
     );
   }
}

// 定义 Redux 状态接口 (示例)
interface IAppState {
  // ... 其他 Redux 状态
}

// mapStateToProps 示例 (如果 FooterContainer 需要 Redux 状态)
const mapStateToProps = (state: IAppState, ownProps: any) => {
 return {
  // 映射 Redux 状态到 props
 };
};

// mapDispatchToProps 示例 (如果 FooterContainer 需要 dispatch Redux actions)
const mapDispatchToProps = {
  // 映射 Redux actions 到 props
};

// 使用 connect 连接 FooterComponent 到 Redux store
// connect 会将 mapStateToProps 和 mapDispatchToProps 映射的 props
// 以及从父组件直接传递下来的 props (如 handleReset) 合并到 FooterComponent 的 props 中
export const FooterContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(/* styled(FooterComponent, getStyles) || */ FooterComponent as any);
// 注意：如果使用了 styled(FooterComponent, getStyles)，则 connect 应该包裹 styled 的结果。
// 在这里为了教程的简洁性，直接使用 FooterComponent。

import React from 'react';

export interface BodyComponentProps {
  shouldResetFocus: boolean;
}

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

    componentDidUpdate(prevProps: BodyComponentProps) {
      // 当 shouldResetFocus 从 false 变为 true 时触发焦点重置
      if (this.props.shouldResetFocus && !prevProps.shouldResetFocus) {
        console.log('BodyComponent: shouldResetFocus changed to true, attempting to focus.');
        const nextFocusableElement = this.containerRef?.current;
        if (nextFocusableElement) {
          nextFocusableElement.focus();
        }
      }
    }

    render () {
      let body = null; // 假设一些内容逻辑
      return (
        <div tabIndex={0} ref={this.containerRef} style={{ border: '1px solid blue', padding: '10px', margin: '10px' }}>
          {/* <BackButtonContainer /> */}
          <p>Body内容区域 (当前 shouldResetFocus: {this.props.shouldResetFocus ? 'true' : 'false'})</p>
          {body}
        </div>
      );
    }
}