基于react組件之間的參數(shù)傳遞(詳解)
更新時間：2017年09月05日 07:49:05 作者：壹然
下面小編就為大家?guī)硪黄趓eact組件之間的參數(shù)傳遞(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
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ù)傳遞(詳解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
最近在寫項目的時候遇到了一個問題,當編輯完代碼后echarts圖正常展示 , 可再次刷新頁面 , echarts會消失,所以本文給大家介紹了react echarts刷新不顯示問題原因和解決方法,需要的朋友可以參考下2024-02-02
本文介紹了如何使用React構建一個高效的視頻上傳組件,包括基礎概念、常見問題與解決方案以及易錯點,通過實際代碼案例,展示了如何實現(xiàn)文件大小和格式驗證、上傳進度顯示等功能,并詳細解釋了跨域請求和并發(fā)上傳控制等技術細節(jié)2025-01-01
以文本為例,為了實現(xiàn)無限循環(huán)的視覺效果,我們需要準備兩段相同的文本,并讓第二段文本的頭部銜接在第一段文本的尾部,同時,為兩段文本設置相同的滾動動畫,本文給大家介紹了基于React實現(xiàn)無限滾動表格,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了React中react-redux和路由詳解，redux早期被設計成可以在各個框架中使用，因此在不同的框架中使用的時候，要引入相應的插件，感興趣的朋友可以繼續(xù)學習下面文章2022-08-08
Electron整合React使用搭建開發(fā)環(huán)境的步驟詳解
這篇文章主要介紹了Electron整合React使用搭建開發(fā)環(huán)境，本文分步驟給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值 ,需要的朋友可以參考下2020-06-06
本篇文章主要介紹了使用React全家桶搭建一個后臺管理系統(tǒng)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
react-native使用leanclound消息推送的方法
這篇文章主要介紹了react-native使用leanclound消息推送的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
本文主要介紹了React子組件調(diào)用父組件的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-08-08
這篇文章主要介紹了react實現(xiàn)阻止父容器滾動方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
深入React?18源碼useMemo?useCallback?memo用法及區(qū)別分析
這篇文章主要為大家介紹了React?18源碼深入分析useMemo?useCallback?memo用法及區(qū)別，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04