在
React 中，
组件之间传递数据有多种常见的方法：
### 父子
组件通信
- **父
传子**：父
组件可以通过 `props` 向子
组件传递数据。父
组件定义
数据和方法，然后将它们作为属性
传递给子
组件，子
组件接收并使用这些
数据和方法进行展示和
渲染。
```jsx
// 父
组件
import
React from '
react';
import Child from './Child';
function Parent() {
const message = 'Hello from parent';
return <Child message={message} />;
}
// 子
组件
import
React from '
react';
function Child(props) {
return <p>{props.message}</p>;
}
export default Child;
```
- **子
传父**：子
组件可以通过调用父
组件传递过来的回调函数，并将
数据作为参数
传递给该回调函数，从而实现向父
组件传递数据。
```jsx
// 父
组件
import
React, { useState } from '
react';
import Child from './Child';
function Parent() {
const [childData, setChildData] = useState('');
const handleChildData = (data) => {
setChildData(data);
};
return (
<div>
<Child onSendData={handleChildData} />
<p>Data from child: {childData}</p>
</div>
);
}
// 子
组件
import
React from '
react';
function Child(props) {
const sendDataToParent = () => {
const data = 'Data from child';
props.onSendData(data);
};
return <button onClick={sendDataToParent}>Send data to parent</button>;
}
export default Child;
```
### 跨级
组件通信（上下文 API）
通过 `
React.createContext` 创建上下文对象，使用 `Provider`
组件提供
数据，在需要使用
数据的子
组件中使用 `Consumer` 或 `useContext` 来获取
数据。
```jsx
import
React, { createContext, useContext } from '
react';
const MyContext = createContext();
// 提供
数据的
组件
function Parent() {
const value = 'Data from parent';
return (
<MyContext.Provider value={value}>
<Child />
</MyContext.Provider>
);
}
// 消费
数据的
组件
function Child() {
const contextValue = useContext(MyContext);
return <p>{contextValue}</p>;
}
```
### 状态管理库（Redux 或 MobX）
在复杂的
React 应用中，可以使用状态管理库来实现
组件之间的
数据共享。以 Redux 为例，它通过一个单一的 store 来管理应用的状态，
组件可以通过订阅 store 中的状态来获取
数据，并通过 dispatch action 来修改状态。
```jsx
// 安装依赖
// npm install redux
react-redux
// 创建 action
const increment = () => {
return {
type: 'INCREMENT'
};
};
// 创建 reducer
const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
};
// 创建 store
import { createStore } from 'redux';
const store = createStore(counterReducer);
// 使用 Provider 提供 store
import { Provider } from '
react-redux';
import
React from '
react';
import
ReactDOM from '
react-dom';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
// 在
组件中使用 connect 或 useSelector 获取
数据
import { useSelector, useDispatch } from '
react-redux';
import
React from '
react';
function Counter() {
const count = useSelector((state) => state);
const dispatch = useDispatch();
return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch(increment())}>Increment</button>
</div>
);
}
```
### 回调 refs
父
组件给子
组件传递一个 `ref` 属性，并且采用 `callback-refs` 的形式。这个回调函数接收
React 组件实例或原生 DOM 元素作为参数，当父
组件挂载时，
React 会执行这个 `ref` 回调函数，并将子
组件实例作为参数
传给回调函数，从而实现父
组件对子
组件的访问。
```jsx
// 子
组件
class Child extends
React.Component {
sayHello() {
console.log('Hello from child');
}
render() {
return <div>Child Component</div>;
}
}
// 父
组件
class Parent extends
React.Component {
componentDidMount() {
this.childRef.sayHello();
}
render() {
return <Child ref={(ref) => (this.childRef = ref)} />;
}
}
```
本文详细介绍了React组件间四种常见的数据传递方式：正向传值（使用props）、逆向传值（函数传值）、同级传值（pubsub-js）及跨组件传值（context）。每种方式都配有具体的实现步骤。
扫一扫
2631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
