React傳值組件傳值之間的關(guān)系詳解

更新時間：2019年08月26日 09:45:59 作者：渺茫大海

這篇文章主要介紹了React傳值組件傳值之間的關(guān)系詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

react 組件相互之間的傳值：

傳值分父級組件傳值給子組件子組件傳值給父組件平級組件、沒有嵌套的組件相互傳值

1.父組件向子組件傳值

父組件通過屬性的形式來向子組件傳值，子組件通過props來接受父組件傳遞過來的參數(shù)

//子組件
class list extends React.Component{
  constructor(props){
    super(props); // 初始化可以不用管
  }
  render(){
    return(
      <div>
       <div>{this.props.nameall}</div>
      </div>
    )
  }
}
//父組件
class App extends React.Component{
  render(){
    return(
      <div>
        <list content="item"/>
      </div>
    )
  }
}

2.子組件向父組件傳值

子組件和父組件通信傳值的話，子組件調(diào)用父組件傳遞過來的方法，從而實現(xiàn)

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

在react項目中webpack使用mock數(shù)據(jù)的操作方法
這篇文章主要介紹了在react項目中webpack使用mock數(shù)據(jù)的操作方法,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-06-06
React Native 圖片查看組件的方法
這篇文章主要介紹了React Native 圖片查看組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
React倒計時功能實現(xiàn)代碼——解耦通用
這篇文章主要介紹了React倒計時功能實現(xiàn)——解耦通用,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-09-09
react Suspense工作原理解析
這篇文章主要為大家介紹了react Suspense工作原理解析以及基本應(yīng)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
react-redux的connect示例詳解
connect()是react-redux中的核心方法之一，它將react組件預(yù)redux中的Store真正連接在一起，這篇文章主要介紹了react-redux的connect詳解,需要的朋友可以參考下
2023-01-01
react-native?父函數(shù)組件調(diào)用類子組件的方法(實例詳解)
這篇文章主要介紹了react-native?父函數(shù)組件調(diào)用類子組件的方法,通過詳細步驟介紹了React 函數(shù)式組件之父組件調(diào)用子組件的方法，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-09-09
ReactRouterV6如何獲取當(dāng)前路由參數(shù)
這篇文章主要介紹了ReactRouterV6如何獲取當(dāng)前路由參數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
React實現(xiàn)控制減少useContext導(dǎo)致非必要的渲染詳解
這篇文章主要介紹了React如何有效減少使用useContext導(dǎo)致的不必要渲染,使用useContext在改變一個數(shù)據(jù)時，是通過自己逐級查找對比改變的數(shù)據(jù)然后渲染，本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-11-11
React中的常用Hooks分享
React?提供了許多常用的?Hooks，用于在函數(shù)組件中添加狀態(tài)管理、副作用處理和其他功能，本文主要介紹了其中幾個常用的，需要的可以收藏一下
2023-07-07
React實現(xiàn)父組件調(diào)用子組件的兩種寫法
react通信分很多種,比如：父子通信,兄弟通信等等,這里我們就簡單說一下父子通信,父子通信分為：父組件調(diào)用子組件里面的方法；子組件調(diào)用子組件里面的方法,這里我們著重說一下父組件調(diào)用子組件,需要的朋友可以參考下
2024-04-04