栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

React.js-将状态值从一个组件传递到另一个

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

React.js-将状态值从一个组件传递到另一个

如果必须将状态从仪表板传递到侧边栏,则必须从仪表板的渲染功能渲染侧边栏。在这里,您可以将仪表板的状态传递给补充工具栏。

程式码片段

class Dashboard extends Component {......  render(){    return(    <Sidebar data={this.state.data1}/>    );  }}

如果您希望仪表板接收对传递到边栏的道具(data1)所做的更改,则需要提升状态。即,您必须将功能引用从仪表板传递到补充工具栏。在补充工具栏中,无论何时要将data1传递回仪表板,都必须调用它。代码段。

class Dashboard extends Component {  constructor(props){    ...    //following is not required if u are using => functions in ES6.    this.onData1Changed = this.onData1Changed.bind(this);  }  ...  ...  onData1Changed(newData1){    this.setState({data1 : newData1}, ()=>{      console.log('Data 1 changed by Sidebar');    })  }  render(){    return(    <Sidebar data={this.state.data1} onData1Changed={this.onData1Changed}/>    );  }}class Sidebar extends Component {  ...  //whenever data1 change needs to be sent to Dashboard  //note: data1 is a variable available with the changed data  this.props.onData1changed(data1);}

参考文档:https :
//facebook.github.io/react/docs/lifting-state-
up.html



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/401559.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号