React中实现组件通信的几种方式小结

// 父组件

import React, { Component } from 'react'
import CChild from "./components/C-Child"

export default class CApp extends Component {
    state = {
        msg: '这是父组件的数据'
    }
    
    render() {
        return (
            <div>
                <h2>父组件</h2>

                <CChild msg={this.state.msg} />
            </div>
        )
    }
}

// 子组件
import React, { Component } from 'react'

export default class CChild extends Component {
    render() {
        return (
            <div>
                <h4>子组件</h4>
                <p>{this.props.msg}</p>
            </div>
        )
    }
}

//父组件PApp
import React, { Component } from 'react'
import PChild from './components/PChild'

export default class PApp extends Component {
    state = {
        msg: ''
    }

    callback = (newMsg) => {
        console.log('拿到子组件的数据: ' + newMsg);
        this.setState({
            msg: newMsg
        })
    }

    render() {
        return (
            <div>
                <h2>父组件 --- {this.state.msg}</h2>
                // 将回调函数传递给子组件 
                <PChild cb={this.callback} />
            </div>
        )
    }
}

 //子组件PChild
import React, { Component } from 'react'

export default class PChild extends Component {
    state = {
        msg: '来自子组件的数据'
    }
    
    // 处理按钮点击事件，调用父组件传递的回调函数
    handler = () => {
        this.props.cb(this.state.msg)// 将子组件的数据传递给父组件
    }

    render() {
        return (
            <div>
                <h4>子组件</h4>
                <button onClick={this.handler}>传递</button>
            </div>
        )
    }
}

import React, { Component } from 'react';
import BrotherA from "./components/BrotherA";
import BrotherB from "./components/BrotherB";

class BApp extends Component {
    state = {
        message: 'hello'
    }
    
    // 回调函数，用于更新 message 状态
    // 注意：React 中状态更新通常使用 setState 方法
    fn = (newMsg) => {
        console.log('父组件收到：' + newMsg);
        this.setState({
            message: newMsg
        })
    }
    
    render() {
        return (
            <div>
                <h1>父组件</h1>
                {/* 将 fn 方法作为 props 传递给 BrotherA 组件 */}
                <BrotherA cb={this.fn} />
                {/* 将 message 状态作为 props 传递给 BrotherB 组件 */}
                <BrotherB message={this.state.message} />
            </div>
        );
    }
}

export default BApp;

import React from 'react';

const BrotherA = props => {
    const msg = '来自子组件A的数据'

    const handle = () => {
        props.cb(msg)
    }
    return (
        <div>
            <h4 onClick={handle}>子组件A</h4>
        </div>
    );
};

export default BrotherA;

import React from 'react';

const BrotherB = props => {
    return (
        <div>
            <h4>子组件B -- {props.message}</h4>
        </div>
    );
};

export default BrotherB;

import React from 'react';

// 创建一个上下文对象
const { Provider, Consumer } = React.createContext();

// 导出 Provider 和 Consumer 组件，以便在其他地方使用
export {
    Provider,
    Consumer
}

// BApp.jsx

import React, { Component } from 'react';
import BrotherB from "./components/BrotherB";

import { Provider } from "./context.js";

class BApp extends Component {
    state = {
        message: 'hello react', // 初始化状态值
    }

    render() {
        return (
            // 使用 Provider 组件提供数据
            <Provider value={this.state.message}>
                <div>
                    <h1>父组件</h1>
                    {/* 渲染子组件 */}
                    <BrotherB />
                </div>
            </Provider>
        );
    }
}

export default BApp;

// BrotherB.jsx

import React from 'react';

import { Consumer } from '../provider.js';

const BrotherB = props => {

    return (
        // 使用 Consumer 组件消费数据
        <Consumer>
            {value => (
                <div>
                    {/* 使用从 Provider 传递下来的值进行渲染 */}
                    <h4>子组件B -- {value}</h4>
                </div>
            )}
        </Consumer>
    );
};
export default BrotherB;

<Consumer>
  {value => (
    // 在这里可以直接使用 value 进行渲染或处理
    <div>
      <h4>子组件B -- {value}</h4>
    </div>
  )}
</Consumer>