React中父组件向Redux容器传递状态管理函数实现兄弟组件通信

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,
    };
    // 绑定this，确保handleReset方法在作为回调函数传递时能正确访问组件实例的上下文
    this.handleReset = this.handleReset.bind(this);
  }

  // 定义一个回调函数，用于更新shouldResetFocus状态
  handleReset(reset: boolean) {
    this.setState({
      shouldResetFocus: reset, // 根据传入的参数更新状态
    });
  }

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

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

// FooterComponent.ts
export interface IFooterComponentProps {
   // 定义handleReset属性，它是一个接受布尔值并无返回值的函数
   handleReset: (reset: boolean) => void;
   // 其他可能存在的props
}

export class FooterComponent extends React.Component<IFooterComponentProps> {
   render () {
     return (
       <button onClick={this.onBtnClick}>触发重置</button>
     );
   }

   onBtnClick = () => {
     // 其他逻辑...

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

// BodyComponent.ts
import React from 'react';

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>这是一个Body组件的内容</p>; // 示例内容
     return (
       <div tabIndex={0} ref={this.containerRef} style={{ border: this.props.shouldResetFocus ? '2px solid red' : '1px solid gray', padding: '10px' }}>
        {/* <BackButtonContainer /> */}
        {body}
      </div>
    );
   }
}

// ParentComponent.ts
import React from 'react';
import { BodyComponent } from './BodyComponent';
import { FooterContainer } from './FooterContainer'; // 假设FooterContainer已正确导出

interface IParentComponentProps {}

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

  handleReset(reset: boolean) {
    console.log('ParentComponent: handleReset called with', reset);
    this.setState({
      shouldResetFocus: reset,
    });
  }

  public render() {
    console.log('ParentComponent: render, shouldResetFocus:', this.state.shouldResetFocus);
    return (
      <div style={{ padding: '20px', border: '1px dashed blue' }}>
        <h1>Parent Component</h1>
        <BodyComponent shouldResetFocus={this.state.shouldResetFocus} />
        <FooterContainer handleReset={this.handleReset} />
      </div>
    );
  }
}

// BodyComponent.ts
import React from 'react';

export interface BodyComponentProps {
  shouldResetFocus: boolean;
}

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

    componentDidUpdate(prevProps: BodyComponentProps) {
      console.log('BodyComponent: componentDidUpdate, current:', this.props.shouldResetFocus, 'prev:', prevProps.shouldResetFocus);
      if (this.props.shouldResetFocus && !prevProps.shouldResetFocus) {
        const nextFocusableElement = this.containerRef?.current;
        if (nextFocusableElement) {
          nextFocusableElement.focus();
          console.log('BodyComponent: Focus applied!');
          // 聚焦后可以将状态重置为false，避免重复聚焦
          // 实际应用中可能需要ParentComponent提供一个重置shouldResetFocus的回调
        }
      }
    }

    render () { 
     let body = <p>这是Body组件的内容。当shouldResetFocus为true时，此区域将被聚焦。</p>;
     return (
       <div tabIndex={0} ref={this.containerRef} 
            style={{ 
                border: this.props.shouldResetFocus ? '2px solid red' : '1px solid gray', 
                padding: '10px', 
                marginTop: '10px' 
            }}>
        <h2>Body Component</h2>
        {body}
      </div>
    );
   }
}

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

export interface IFooterComponentProps {
   handleReset: (reset: boolean) => void;
   // Redux相关的props，如果FooterContainer有mapDispatchToProps或mapStateToProps
   // 例如：someReduxProp: string;
}

export class FooterComponent extends React.Component<IFooterComponentProps> {
   render () {
     return (
       <div style={{ marginTop: '20px', padding: '10px', border: '1px solid green' }}>
         <h2>Footer Component</h2>
         <button onClick={this.onBtnClick} style={{ padding: '8px 15px', cursor: 'pointer' }}>
           点击重置BodyComponent聚焦
         </button>
       </div>
     );
   }

   onBtnClick = () => {
     console.log('FooterComponent: Button clicked, calling handleReset(true)');
     // 调用从父组件传递下来的handleReset函数
     this.props.handleReset(true);
   }
}

// FooterContainer.ts (假设Redux配置)
import { connect } from 'react-redux';
import styled from 'styled-components'; // 假设有styled-components
import { FooterComponent } from './FooterComponent';

// 示例AppState接口
interface IAppState {
    // ... Redux state structure
}

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

const mapDispatchToProps = {
  // Redux action creators 映射
};

// styled(FooterComponent, getStyles) 假设是一个高阶组件或样式包装
// connect 会将 mapStateToProps, mapDispatchToProps 和 ownProps 传递给 FooterComponent
export const FooterContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(FooterComponent); // 这里直接包裹FooterComponent，getStyles是styled-components的用法，此处简化