React的組件傳值有哪些

在React中驻子，數(shù)據(jù)的傳遞方式有以下幾種

父傳子通過屬性
子傳父通過事件
兄弟間傳值先傳給父再傳給兄弟
復(fù)雜關(guān)系 redux- 如何理解Redux

直接上代碼理解

父傳子

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class HomeTop extends Component {
  render() {
    return (
      <h1>屋頂?shù)念伾?{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'))

需要注意的是未斑，改成函數(shù)式組件， props需要在子組件上通過形參的方式接收和使用备徐，不再是通過this.props

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

// 函數(shù)式組件 通過props形參來接收
function HomeTop(props) {
    return (
        <h1>屋頂?shù)念伾?{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'))

子傳父

通過觸發(fā)事件的方式

父組件中給子組件掛載一個(gè)自定義事件 onChangeColor

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

子組件自己觸發(fā)事件

const GreenBtn = (props) => {
  setInterval(() => {
    // 觸發(fā) 父組件上的自定義事件
    props.onChangeColor("green");
  }, 1000);

  return (
    <button >綠色</button>
  )
}

3.父組件上監(jiān)聽到了事件觸發(fā)

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

const GreenBtn = (props) => {

  setInterval(() => {
    // 觸發(fā) 父組件上的自定義事件
    props.onChangeColor("green");
  }, 1000);

  return (
    <button >綠色</button>
  )
}


class App extends Component {
  state = {
    color: "red"
  }
// 監(jiān)聽事件觸發(fā)
  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(() => {
    // 觸發(fā) 父組件上的自定義事件
    props.onChangeColor("green");
  }, 1000);

  return (
    <button >綠色</button>
  )
}


class App extends Component {
  state = {
    color: "red"
  }
// 監(jiān)聽事件觸發(fā)
  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通過觸發(fā)事件，將數(shù)據(jù)傳遞個(gè)父組件
父組件通過屬性props的方式將數(shù)據(jù)傳遞給子組件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基礎(chǔ)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者