react 組件傳值的三種方法

更新時間：2019年06月03日 10:31:46 作者：阿西瓜

這篇文章主要介紹了react 組件傳值的三種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

整理 react 組件傳值三種方式

父組件向子組件傳值（通過props傳值）

子組件：

  class Children extends Component{
    constructor(props){
      super(props);
    }
    render(){
      return(
        <div>這是：{this.props.name}</div> // 這是 父向子
      )
    }
  }

父組件:

  class App extends React.Component{
    render(){
      return(
        <div>
          <Children name="父向子"/>
        </div>
      )
    }
  }

父組件向子組件傳值（回調函數(shù)）

子組件

  class Children extends Component{
    constructor(props){
      super(props);
    }
    handerClick(){
      this.props.changeColor('skyblue') // 執(zhí)行父組件的changeColor 并傳參 必須和父組件中的函數(shù)一模一樣
    }
    render(){
      return(
        <div>
          <div>父組件的背景色{this.props.bgcolor}</div> // 子組件接收父組件傳過來的值 bgcolor
          <button onClick={(e)=>{this.handerClick(e)}}>改變父組件背景</button> // 子組件執(zhí)行函數(shù)
        </div>
      )
    }
  }

父組件

  class Father extends Component{
    constructor(props){
      super(props)
      this.state = {
        bgcolor:'pink'
      }
    }
    bgChange(color){
      this.setState({
        bgcolor:color
      })
    }
    render(props){
      <div style={{background:this.state.bgcolor}}>
              // 給子組件傳遞的值 color 
        <Children bgcolor={this.state.bgcolor} changeColor={(color)=>{this.bgChange(color)}} /> 
                          // changeColor 子組件的參數(shù)=color 當做形參
      </div>
    }
  }

兄弟組件傳值（子傳給父，父再傳給另一個子）

子組件1

  class Children1 extends Component{
    constructor(props){
      super(props);
    }
    handerClick(){
      this.props.changeChild2Color('skyblue') 
      // 改變兄弟組件的顏色 把changeChild2Color的參數(shù)傳給父
    }
    render(){
      return(
        <div>
          <div>children1</div>
          <button onClick={(e)=>{this.handerClick(e)}}>改變children2背景</button>
        </div>
      )
    }
  }

子組件2

  class Children2 extends Component{
    constructor(props){
      super(props);
    }
    render(){
      return(
        <div style={{background:this.props.bgcolor}}>
        // 從父元素獲取自己的背景色
          <div>children2 背景色 {this.props.bgcolor}</div>
          // children2 背景色 skyblue
        </div>
      )
    }
  }

父組件

class Father extends Component{
  constructor(props){
    super(props)
    this.state = {
      child2bgcolor:'pink'
    }
  }
  onchild2bgChange(color){
    this.setState({
      child2bgcolor:color
    })
  }
  render(props){
    <div>
      <Children1 changeChild2Color={(color)=>{this.onchild2bgChange(color)}} />
      <Children2 bgcolor={this.state.child2bgcolor} />
    </div>
  }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

react hooks實現(xiàn)防抖節(jié)流的方法小結
這篇文章主要介紹了react hooks實現(xiàn)防抖節(jié)流的幾種方法,文中通過代碼示例給大家講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
2024-04-04
在React頁面重新加載時保留數(shù)據(jù)的實現(xiàn)方法總結
在React頁面重新加載時保留數(shù)據(jù),可以通過多種方法來實現(xiàn),常見的方法包括使用瀏覽器的本地存儲（Local Storage 或 Session Storage）、URL參數(shù)、以及服務器端存儲等,本文給大家總結了一些具體實現(xiàn)方法,需要的朋友可以參考下
2024-06-06
react的滑動圖片驗證碼組件的示例代碼
這篇文章主要介紹了react的滑動圖片驗證碼組件的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-02-02
詳解React的組件通訊
這篇文章主要介紹了詳解react組件通訊方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-11-11
React模仿網易云音樂實現(xiàn)一個音樂項目詳解流程
這篇文章主要介紹了React模仿網易云音樂實現(xiàn)一個音樂項目的詳細流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
React?Native性能優(yōu)化指南及問題小結
本文將介紹在React?Native開發(fā)中常見的性能優(yōu)化問題和解決方案,包括ScrollView內無法滑動、熱更新導致的文件引用問題、高度獲取、強制橫屏UI適配、低版本RN適配iOS14、緩存清理、navigation參數(shù)取值等,感興趣的朋友一起看看吧
2024-01-01
詳解使用create-react-app快速構建React開發(fā)環(huán)境
這篇文章主要介紹了詳解使用create-react-app快速構建React開發(fā)環(huán)境,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
react?hooks閉包陷阱切入淺談
這篇文章主要介紹了從react?hooks閉包陷阱切入淺談react?hooks，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
React中父子組件通信詳解
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-08-08
ReactRouter的實現(xiàn)方法
這篇文章主要介紹了ReactRouter的實現(xiàn),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-01-01