基于react組件之間的參數(shù)傳遞(詳解)
更新時(shí)間：2017年09月05日 07:49:05 作者：壹然
下面小編就為大家?guī)硪黄趓eact組件之間的參數(shù)傳遞(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
1、父組件向子組件傳遞參數(shù)
class Child extends Component {
componentDidMount(){
let name = this.props.default;
console,log(name);
}
render(){
const { default} = this.props;
return (
<Input />
)
}
}
import React, { Component } from 'react';
import Child from './Child';
class Parent extends Component {
state = {
name: 'Bob'
}
render() {
return (
<div>
<Child default={this.state.name} />
</div>
)
}
}
2、子組件向父組件傳遞參數(shù)
class Child extends Component {
state={
name:'Bob'
}
componentDidMount(){
this.props.toParent(this.state.name);
}
render(){
return (
<Input />
)
}
}
import React, { Component } from 'react';
import Child from './Child';
class Parent extends Component {
state = {
name:''
}
getChildInfo = (name)=>{
this.setState({name:name});
}
render() {
return (
<div>
<Child toParent={this.getChildInfo.bind(this)} />
</div>
)
}
}
以上這篇基于react組件之間的參數(shù)傳遞(詳解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了React的三大屬性，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
使用webpack配置react-hot-loader熱加載局部更新
這篇文章主要介紹了使用webpack配置react-hot-loader熱加載局部更新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
我們項(xiàng)目中通常會(huì)需要引入字體,所以下面這篇文章主要給大家介紹了關(guān)于如何在React項(xiàng)目中引入字體文件并使用的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
react?umi?刷新或關(guān)閉瀏覽器時(shí)清除localStorage方式
這篇文章主要介紹了react?umi?刷新或關(guān)閉瀏覽器時(shí)清除localStorage方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
在React中,state 是一個(gè)用于存儲(chǔ)組件內(nèi)部數(shù)據(jù)的特殊對(duì)象,每個(gè)React組件都可以包含自己的state,我們往往是通過修改state的值來驅(qū)動(dòng)React重新渲染組件,這篇文章主要介紹了React中state屬性,需要的朋友可以參考下2023-11-11
詳解create-react-app 2.0版本如何啟用裝飾器語法
這篇文章主要介紹了詳解create-react-app 2.0版本如何啟用裝飾器語法，cra2.0時(shí)代如何啟用裝飾器語法呢? 我們依舊采用的是react-app-rewired, 通過劫持webpack cofig對(duì)象, 達(dá)到修改的目的2018-10-10
這篇文章主要為大家介紹了React錯(cuò)誤用法習(xí)慣分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了react獲取input輸入框的值的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
經(jīng)典的diff算法中，將一棵樹轉(zhuǎn)為另一棵樹的最低時(shí)間復(fù)雜度為 O(n^3)，其中n為樹種節(jié)點(diǎn)的個(gè)數(shù)。假如采用這種diff算法，一個(gè)應(yīng)用有1000個(gè)節(jié)點(diǎn)的情況下，需要比較十億次才能將dom樹更新完成，顯然這個(gè)性能是無法讓人接受的2022-11-11
一文詳解React Redux設(shè)計(jì)思想與工作原理
最近看項(xiàng)目中使用了?Redux,?便嘗試了解一波?Redux?的設(shè)計(jì)思想與工作原理,所以本文詳細(xì)的給大家介紹了Redux設(shè)計(jì)思想與工作原理,需要的朋友可以參考下2023-09-09