日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React組件間通訊傳值實現詳解_React

作者：未及545 ? 更新時間： 2022-12-27 編程語言

組件的props：

1.組件是封閉的，要接收外部數據應該通過props來實現。

2.props的作用，接收傳遞給組件的數據。

3.傳遞數據：給組件標簽添加屬性

4.接收數據：函數組件通過參數props接收數據，類組件通過this.props接收數據。

特點：

1.可以給組件傳遞任意類型的數據。

2.props是只讀對象，只能讀取屬性的值，不能修改對象。

3.使用類組件時，如果寫了構造函數，應該將props傳遞給super（），否則無法在構造函數中獲取props。

父->子傳值

import React, { Component } from 'react'
import ComSmall from './ComSmall'
export default class ComBig extends Component {
  constructor(){
    super()
    this.state={
      info:"天冷了要加衣"
    }
  }
  render() {
    return (
      <div>我是父組件
        {/* 注冊子組件 ,通過msg傳遞給子組件*/}
        <ComSmall msg={this.state.info}></ComSmall>
      </div>
    )
  }
}
import React, { Component } from 'react'
export default class ComSmall extends Component {
  constructor(props){
    // 此處不傳props
    super(props)
   this.state={ }
  //  console.log(this.props);此處打印的是undefined，傳遞后打印的是數據
  }
  render() {
    return (
      <div>我是子組件
        {/* 接收父組件傳值 */}
        {this.props.msg}
      </div>
    )
  }
}

子->父傳值

利用回調函數，父組件提供回調，子組件調用，將要傳遞的數據作為回調函數的參數。

import React, { Component } from 'react'
export default class ComSmall extends Component {
  constructor(){ 
    super()
   this.state={
    msg:"給你買了一部手機"
   }
  }
  sendMsg(){
    // 子組件調用父組件傳遞過來的回調函數
    this.props.getMsg(this.state.msg)
  }
  render() {
    return (
      <div>我是子組件
    <button onClick={()=>this.sendMsg()}>給父組件傳值</button>
      </div>
    )
  }
}
import React, { Component } from 'react'
import ComSmall from './ComSmall'
export default class ComBig extends Component {
  constructor(){
    super()
    this.state={
     data:""
    }
  }
getChindMsg=(val)=>{
// console.log("獲得子組件傳過來的值：",val);
this.setState({
  data:val
})
} 
  render() {
    return (
      <div>我是父組件
        <p>獲得子組件傳過來的值：{this.state.data}</p>
        {/* 將回調函數傳遞給子組件 */}
        <ComSmall getMsg={this.getChindMsg}></ComSmall>
      </div>
    )
  }
}

原文鏈接：https://blog.csdn.net/qq_72760247/article/details/127885352

欄目分類
最近更新