初識React(8)：父子組件傳參

paulli3 發布于2019-08-23 11:48 / 3051人閱讀

摘要：父級向子級傳參父子組件通信主要用到，如下在父組件中父組件我是父級過來的內容在子組件中子組件通過上面例子可以看出，在父組件中，我們引入子組件，通過給子組件添加屬性，來起到傳參的作用，子組件可以通過獲取父組件傳過來的參數子級向父級傳參在父組件中

父級向子級傳參

父子組件通信主要用到props，如下：

在父組件中：

import React from "react"
import ChildCom from "./childCom.js"

class ParentCom extends React.Component {
   render() {
     return (
       
         父組件
         
       
     )
   }
}

export default ParentCom;

在子組件中：

import React from "react"

class ChildCom extends React.Component {
   render() {
     return (
       
         子組件
         
           {this.props.content}
         
       
     )
   }
}

export default ChildCom;

通過上面例子可以看出，在父組件中，我們引入子組件，通過給子組件添加屬性，來起到傳參的作用，子組件可以通過props獲取父組件傳過來的參數

子級向父級傳參

在父組件中：

import React from "react"
import ChildCom from "./childCom.js"

class ParentCom extends React.Component {
  state = {
    getChildValue: ""
  }
  getChildValue(value) {
    this.setState({
      getChildValue: value
    })
  }

   render() {
     return (
       
         父組件
         子組件過來的值為：{this.state.getChildValue}
         
       
     )
   }
}

export default ParentCom;

在子組件中：

import React from "react"

class ChildCom extends React.Component {
  valueToParent(value) {
    this.props.onValue(value);
  }
   render() {
     return (
       
         子組件
         
            向父組件傳值123
         
       
     )
   }
}

export default ChildCom;

子組件向父組件傳參，其實就是在父組件中給子組件添加一個屬性，這個屬性的內容為一個函數，然后在子組件中調用這個函數，即可達到傳遞參數的效果

GPU云服務器云服務器父子組件父子組件通信父子組件通訊父子組件-動態渲染

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97488.html

手挽手帶你學React：二檔 React生命周期以及組件開發

摘要：手挽手帶你學入門二檔組件開發的開始，合理運用生命周期和組件，能夠讓你的開發變地流利又這篇文章帶你學會創建組件，運用組建。手挽手帶你學React入門二檔,組件開發的開始，合理運用生命周期和組件，能夠讓你的開發變地流利又happy,這篇文章帶你學會創建組件，運用組建。學起來吧！ React 組件生命周期學習React，生命周期很重要，我們了解完生命周期的各個組件，對寫高性能組件會有很大...

izhuhaodev 2019-08-23 15:11 評論0 收藏0
初識React(3)：組件

摘要：創建組件創建組件之前要注意以下幾點組件創建的名稱首字母得大寫組件中返回的只能是一個根節點，所有的內容得用一個元素都框起來無狀態函數式組件無狀態函數式組件可以理解成就是一個函數生成的，使得代碼的可讀性更好，并且精簡便利，減少了冗余，無狀態組件創建組件創建組件之前要注意以下幾點：組件創建的名稱首字母得大寫組件中返回的JSX只能是一個根節點，所有的內容得用一個元素都框起來 1.無...

FullStackDeveloper 2019-08-26 12:19 評論0 收藏0
微信小程序：父子間組件傳參

摘要：創建組件打開微信開發者工具，創建組件，會生成四個文件在中我是組件在中私有數據，可用于模版渲染生命周期函數，可以為函數，或一個在段中定義的方法名在中即組件創建完成引入組件要在中引入組件，則在中在中微信小程序組件傳參則組件就能夠顯示，要使得組件 1.創建組件打開微信開發者工具，創建組件，會生成四個文件：wxml,wxss,js,json 在wxml中：我是組件A 在js中： Compo...

zollero 2019-08-22 18:11 評論0 收藏0
React專題：react，redux以及react-redux常見一些面試題

摘要：我們可以為元素添加屬性然后在回調函數中接受該元素在樹中的句柄，該值會作為回調函數的第一個參數返回。使用最常見的用法就是傳入一個對象。單向數據流，比較有序，有便于管理，它隨著視圖庫的開發而被概念化。面試中問框架，經常會問到一些原理性的東西，明明一直在用，也知道怎么用，但面試時卻答不上來，也是挺尷尬的，就干脆把react相關的問題查了下資料，再按自己的理解整理了下這些答案。 reac...

darcrand 2019-08-23 13:41 評論0 收藏0
react 和小程序對比

摘要：主要從以下幾個方面對比下和微信小程序生命周期小程序頁面加載時觸發。數據綁定小程序中的動態數據均來自對應的。例如顯示與隱藏元素小程序在微信小程序中使用和來控制組件的顯示與隱藏。主要從以下幾個方面對比下react和微信小程序生命周期 react 小程序 onLoad: 頁面加載時觸發。一個頁面只會調用一次，可以在onload的參數options中獲取打開當前頁面路徑中的參數。 ...

Lowky 2019-08-23 11:57 評論0 收藏0