本篇文章給大家分享的是有關(guān)使用react怎么實(shí)現(xiàn)組件傳值，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

新興網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)從2013年開(kāi)始到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

父組件向子組件傳值（通過(guò)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>
      )
    }
  }

父組件向子組件傳值（回調(diào)函數(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> // 子組件接收父組件傳過(guò)來(lái)的值 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 當(dāng)做形參
      </div>
    }
  }

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

子組件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怎么實(shí)現(xiàn)組件傳值，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：使用react怎么實(shí)現(xiàn)組件傳值
URL標(biāo)題：http://chinadenli.net/article12/gohsdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、微信小程序、網(wǎng)站排名、網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)