亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

使用react怎么實現組件傳值

發布時間:2021-05-20 17:39:53 來源:億速云 閱讀:153 作者:Leah 欄目:web開發

本篇文章給大家分享的是有關使用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>
      )
    }
  }

父組件向子組件傳值(回調函數)

子組件

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

兄弟組件傳值(子傳給父,父再傳給另一個子)

子組件1

  class Children1 extends Component{
    constructor(props){
      super(props);
    }
    handerClick(){
      this.props.changeChild2Color('skyblue') 
      // 改變兄弟組件的顏色 把changeChild2Color的參數傳給父
    }
    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怎么實現組件傳值,小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

筠连县| 伊宁市| 喀什市| 洞头县| 达拉特旗| 察哈| 喜德县| 阿拉善盟| 扶风县| 明光市| 广南县| 金坛市| 筠连县| 台北市| 新巴尔虎左旗| 白河县| 喀喇| 固原市| 大同市| 内黄县| 开平市| 长沙县| 万宁市| 竹溪县| 宜城市| 舟山市| 赣榆县| 五台县| 哈巴河县| 阿坝县| 昭平县| 南陵县| 马边| 石城县| 文化| 揭西县| 武强县| 白水县| 交口县| 淮阳县| 柏乡县|