react实现组件通信的案例

当使用React构建应用程序时，组件通信是一个重要的话题。以下是一个示例，演示了如何使用React实现组件间的通信：

常规方法：

js 复制代码

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [message, setMessage] = useState('');

  const handleMessageChange = (newMessage) => {
    setMessage(newMessage);
  };

  return (
    <div>
      <h2>Parent Component</h2>
      <ChildComponent onMessageChange={handleMessageChange} />
      <p>Message from child: {message}</p>
    </div>
  );
};

export default ParentComponent;

js 复制代码

// ChildComponent.js
import React, { useState } from 'react';

const ChildComponent = ({ onMessageChange }) => {
  const [inputValue, setInputValue] = useState('');

  const handleMessageSubmit = () => {
    onMessageChange(inputValue);
  };

  return (
    <div>
      <h3>Child Component</h3>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleMessageSubmit}>Send Message</button>
    </div>
  );
};

export default ChildComponent;

在这个例子中，ParentComponent 是父组件，ChildComponent 是子组件。父组件包含一个存储消息的状态 message，并将其作为 onMessageChange 函数的参数传递给子组件。子组件包含一个输入框和一个按钮，用于输入和提交消息。

当子组件中的按钮被点击时，它将调用父组件传递的 onMessageChange 函数，并将当前输入框的值作为参数传递。父组件中的 handleMessageChange 函数将被调用，并更新父组件的 message 状态。

最后，父组件将接收到的消息显示在页面上。

当涉及到不同的组件间通信方式时，代码案例可以帮助更好地理解。以下是每种通信方式的详细代码案例。

Props传递：

js 复制代码

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const message = 'Hello from the parent component';

  return (
    <div>
      <h2>Parent Component</h2>
      <ChildComponent message={message} />
    </div>
  );
};

export default ParentComponent;

js 复制代码

// ChildComponent.js
import React from 'react';

const ChildComponent = (props) => {
  return (
    <div>
      <h3>Child Component</h3>
      <p>Message from parent: {props.message}</p>
    </div>
  );
};

export default ChildComponent;

在这个例子中，通过将 message 作为props传递给子组件 ChildComponent ，子组件可以通过 props 对象访问和显示这个消息。

Context API：

js 复制代码

// MyContext.js
import React from 'react';

const MyContext = React.createContext();

export default MyContext;

js 复制代码

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';
import MyContext from './MyContext';

const ParentComponent = () => {
  const message = 'Hello from the parent component';

  return (
    <div>
      <h2>Parent Component</h2>
      <MyContext.Provider value={message}>
        <ChildComponent />
      </MyContext.Provider>
    </div>
  );
};

export default ParentComponent;

js 复制代码

// ChildComponent.js
import React from 'react';
import MyContext from './MyContext';

const ChildComponent = () => {
  return (
    <div>
      <h3>Child Component</h3>
      <MyContext.Consumer>
        {(message) => <p>Message from parent: {message}</p>}
      </MyContext.Consumer>
    </div>
  );
};

export default ChildComponent;

在这个例子中，通过创建一个上下文 MyContext ，父组件 ParentComponent 在提供者（Provider）中设置了共享的数据 message 。子组件 ChildComponent 使用消费者（Consumer）来访问和显示这个消息。

Redux：

首先，确保已安装redux和react-redux依赖项。

bash 复制代码

npm install redux react-redux

js 复制代码

// store.js
import { createStore } from 'redux';

const initialState = {
  message: 'Hello from Redux',
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_MESSAGE':
      return {
        ...state,
        message: action.payload,
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

js 复制代码

// ParentComponent.js
import React from 'react';
import { connect } from 'react-redux';

const ParentComponent = ({ message, updateMessage }) => {
  const handleMessageChange = () => {
    updateMessage('New message from parent');
  };

  return (
    <div>
      <h2>Parent Component</h2>
      <p>Message: {message}</p>
      <button onClick={handleMessageChange}>Change Message</button>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    message: state.message,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    updateMessage: (newMessage) =>
      dispatch({ type: 'UPDATE_MESSAGE', payload: newMessage }),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(ParentComponent);

js 复制代码

// ChildComponent.js
import React from 'react';
import { connect } from 'react-redux';

const ChildComponent = ({ message }) => {
  return (
    <div>
      <h3>Child Component</h3>
      <p>Message from parent: {message}</p>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    message: state.message,
  };
};

export default connect(mapStateToProps)(ChildComponent);

在这个例子中，首先创建一个Redux store，并定义初始状态和reducer函数来处理状态更新。然后，在父组件 ParentComponent 中，使用 connect 函数来连接Redux store，将 message 状态映射到组件的props，并提供一个 updateMessage 函数来更新消息。子组件 ChildComponent在这个例子中，首先创建一个Redux store，并定义初始状态和reducer函数来处理状态更新。然后，在父组件 ParentComponent中，使用connect函数来连接Redux store，将message状态映射到组件的props，并提供一个updateMessage函数来更新消息。子组件ChildComponent通过connect函数将message` 状态映射到组件的props，然后可以访问和显示这个消息。

发布/订阅模式：

首先，确保已安装eventemitter3依赖项。

bash 复制代码

npm install eventemitter3

js 复制代码

// eventEmitter.js
import EventEmitter from 'eventemitter3';

const eventEmitter = new EventEmitter();

export default eventEmitter;

js 复制代码

// ParentComponent.js
import React from 'react';
import eventEmitter from './eventEmitter';

const ParentComponent = () => {
  const handleMessageChange = () => {
    eventEmitter.emit('messageChange', 'New message from parent');
  };

  return (
    <div>
      <h2>Parent Component</h2>
      <button onClick={handleMessageChange}>Change Message</button>
    </div>
  );
};

export default ParentComponent;

js 复制代码

// ChildComponent.js
import React, { useEffect, useState } from 'react';
import eventEmitter from './eventEmitter';

const ChildComponent = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const handleEvent = (newMessage) => {
      setMessage(newMessage);
    };

    eventEmitter.on('messageChange', handleEvent);

    return () => {
      eventEmitter.off('messageChange', handleEvent);
    };
  }, []);

  return (
    <div>
      <h3>Child Component</h3>
      <p>Message from parent: {message}</p>
    </div>
  );
};

export default ChildComponent;

在这个例子中，通过使用第三方库 eventemitter3 创建一个事件发射器 eventEmitter 。父组件 ParentComponent 在按钮点击事件中触发 messageChange 事件，并将新的消息作为参数传递。子组件 ChildComponent 使用 useEffect 来订阅 messageChange 事件，并在事件发生时更新组件的状态来显示消息。在组件卸载时，需要取消订阅事件以避免内存泄漏。

以上五种组件之间的通信方法,希望对大家有所帮助!