React的组件传值有哪些

在React中，数据的传递方式有以下几种

1. 父传子 通过属性
2. 子传父 通过事件
3. 兄弟间传值 先传给父再传给兄弟
4. 复杂关系 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'))

子传父

通过触发事件的方式

1. 父组件中 给子组件挂载一个自定义事件 onChangeColor

<GreenBtn onChangeColor={this.changeColor}></GreenBtn>

2. 子组件自己触发事件

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

1. 组件A通过触发事件，将数据传递个父组件

2. 父组件通过属性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 组件Aconst GreenBtn = (props) => {  const handleClick = () => {    props.onChangeColor("green");  }  return (    <button style={{ color: props.color }} onClick={handleClick}>绿色</button>  )}// 2 组件Bconst RedBtn = (props) => {  const handleClick = () => {    props.onChangeColor("red");  }  return (    <button style={{ color: props.color }} onClick={handleClick}>红色</button>  )}// 3 组件Cclass 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'))

React的生命周期
React路由
闭包，原型链，继承，AJAX请求步骤等javaScript基础

原著是一个有趣的人,若有侵权,请通知删除