在React中，数据的传递方式有以下几种
- 父传子 通过属性
- 子传父 通过事件
- 兄弟间传值 先传给父再传给兄弟
- 复杂关系 redux- 如何理解Redux
直接上代码理解
父传子
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class HomeTop extends Component {
render() {
return (
<h1>屋顶的颜色是 {this.props.acolor} 尺寸 {this.props.asize}</h1>
)
}
}
class Home extends Component {
state = {
color: "blue",
size: 100
}
render() {
return (
<div>
<HomeTop acolor={this.state.color} asize={this.state.size} ></HomeTop>
</div>
)
}
}
ReactDOM.render(<Home />, document.getElementById('root'))
需要注意的是，改成 函数式组件， props需要在子组件上通过形参的方式接收和使用，不再是通过this.props
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// 函数式组件 通过props形参来接收
function HomeTop(props) {
return (
<h1>屋顶的颜色是 {props.acolor} 尺寸 {props.asize}</h1>
)
}
class Home extends Component {
state = {
color: "blue",
size: 100
}
render() {
return (
<div>
<HomeTop acolor={this.state.color} asize={this.state.size} ></HomeTop>
</div>
)
}
}
ReactDOM.render(<Home />, document.getElementById('root'))
子传父
通过触发事件的方式
- 父组件中 给子组件挂载一个自定义事件
onChangeColor
<GreenBtn onChangeColor={this.changeColor}></GreenBtn>
- 子组件自己触发事件
const GreenBtn = (props) => {
setInterval(() => {
// 触发 父组件上的自定义事件
props.onChangeColor("green");
}, 1000);
return (
<button >绿色</button>
)
}
3.父组件上监听到了事件触发
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
const GreenBtn = (props) => {
setInterval(() => {
// 触发 父组件上的自定义事件
props.onChangeColor("green");
}, 1000);
return (
<button >绿色</button>
)
}
class App extends Component {
state = {
color: "red"
}
// 监听事件触发
changeColor = (color) => {
this.setState({
color
})
}
render() {
return (
<div style={{ backgroundColor: this.state.color }}>
<GreenBtn onChangeColor={this.changeColor}></GreenBtn>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
完整代码
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
const GreenBtn = (props) => {
setInterval(() => {
// 触发 父组件上的自定义事件
props.onChangeColor("green");
}, 1000);
return (
<button >绿色</button>
)
}
class App extends Component {
state = {
color: "red"
}
// 监听事件触发
changeColor = (color) => {
this.setState({
color
})
}
render() {
return (
<div style={{ backgroundColor: this.state.color }}>
<GreenBtn onChangeColor={this.changeColor}></GreenBtn>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
兄弟传值
思路是 组件A ->父组件->组件B
- 组件A通过触发事件，将数据传递个父组件
-
父组件通过属性props的方式将数据传递给子组件B
兄弟传值.png
组件A
const GreenBtn = (props) => {
const handleClick = () => {
props.onChangeColor("green");
}
return (
<button style={{ color: props.color }} onClick={handleClick}>绿色</button>
)
}
父组件
class App extends Component {
state = {
color: "red"
}
changeColor = (color) => {
this.setState({
color
})
}
render() {
return (
<div style={{ backgroundColor: this.state.color }}>
<GreenBtn onChangeColor={this.changeColor} color={this.state.color} ></GreenBtn>
<RedBtn onChangeColor={this.changeColor} color={this.state.color} ></RedBtn>
</div>
)
}
}
组件B
const RedBtn = (props) => {
const handleClick = () => {
props.onChangeColor("red");
}
return (
<button style={{ color: props.color }} onClick={handleClick}>红色</button>
)
}
完整代码
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// 1 组件A
const GreenBtn = (props) => {
const handleClick = () => {
props.onChangeColor("green");
}
return (
<button style={{ color: props.color }} onClick={handleClick}>绿色</button>
)
}
// 2 组件B
const RedBtn = (props) => {
const handleClick = () => {
props.onChangeColor("red");
}
return (
<button style={{ color: props.color }} onClick={handleClick}>红色</button>
)
}
// 3 组件C
class App extends Component {
state = {
color: "red"
}
changeColor = (color) => {
this.setState({
color
})
}
render() {
return (
<div style={{ backgroundColor: this.state.color }}>
<GreenBtn onChangeColor={this.changeColor} color={this.state.color} ></GreenBtn>
<RedBtn onChangeColor={this.changeColor} color={this.state.color} ></RedBtn>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
