React组件传值有多种方法，具体如下：
### 父
组件向子
组件传值（通过props）
基本原理是在
React中，props（属性）是父
组件向子
组件传递数据的主要方式。父
组件在渲染子
组件时，将数据作为属性
传递给子
组件，子
组件通过函数参数接收这些属性。
类组件还可通过构造器的参数 `props` 接收父
组件通过属性
传入的数据，在模板中使用 `this` 打点调用；且 `props` 是只读的，不能修改 [^1][^3]。
示例代码如下：
```jsx
// 父
组件
ReactDOM.render(
<div>
<MyCom1 name="张三"/>
<MyCom2 age="20"/>
</div>,
document.getElementById('example')
)
// 子
组件
class MyCom2 extends
React.Component{
constructor(props) {
super(props);
console.log(props);
this.state = {sex: "男"}
}
render() {
return <div>
组件2-{this.props.age}-{this.state.sex}</div>
}
}
```
### 不能直接在子
组件修改父
组件传来的数据
在
React 中，数据流是向下的，不能在
组件中修改 `props` 里的属性。若要修改数组等数据，需要通过一个载体将子
组件中的
值传入到父
组件，并在父
组件中对数组进行修改 [^2]。
### 插槽
传值
文档中未详细说明插槽
传值的具体原理和代码示例，但提到了这种
传值方式 [^3]。
### 跨层级
组件传值（Context API）
爷爷
组件拿到
值，通过 `Provider`
传递，父
组件和儿子
组件无需处理，孙子
组件通过 `Consumer` 直接获取
值。爷爷
组件引用父
组件，父
组件引用儿子
组件，儿子
组件引用孙子
组件 [^4]。
示例代码如下：
```jsx
// 爷爷
组件（App.js）
import
React from '
react';
import Middle from './Middle'
export const {Provider, Consumer} =
React.createContext()
class App extends
React.Component {
constructor (props){
super(props)
this.state={ money:25 }
}
render(){
return (
<Provider value={this.state.money}>
<Middle></Middle>
</Provider>
)
}
}
export default App;
// 父
组件（Middle.js）
import
React from '
react';
import Son from './Son'
class Middle extends
React.Component {
render() {
return (
<Son />
)
}
}
export default Middle;
// 孙子
组件（Son.js）
import
React from '
react';
import { Consumer } from "./App";
class Son extends
React.Component{
render(){
return(
<Consumer>
{value => <h1>我是接收祖辈的
值：{value}</h1>}
</Consumer>
)
}
}
export default Son
```
### 兄弟
组件传值（Event Bus）
通过事件总线来
实现兄弟
组件之间的
传值。在一个
组件中添加事件监听，在另一个
组件中触发事件，从而
实现数据
传递。例如在兄弟
组件 B 中接收数据并在处理监听事件时进行打印 [^5]。
示例代码如下：
```jsx
// 兄弟
组件B（Footer.js）
import
React, { Component } from '
react'
import eventBus from './event'
export class Footer extends Component {
componentDidMount() {
eventBus.addListener('sayHello', this.sayHelloContent)
}
sayHelloContent(a, b) {
console.log(a, b)
}
componentWillUnmount() {
eventBus.removeListener('sayHello', this.sayHelloContent)
}
render() {
return (
<div>Footer</div>
)
}
}
export default Footer
```
本文详细介绍了React中组件间的数据传递，包括正向传值（props）、逆向传值（事件回调函数）以及跨组件传值（Context API）。通过实例解析，帮助开发者掌握在不同场景下如何有效地在React组件间传递数据。
扫一扫
199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
