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 组件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'))

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