如何解决在React中将对象传递给组件
我对生活的反应方面还很陌生,遇到了一个我的语法有点烦人的问题,我可以在一点帮助下完成。
前提很简单:
我正在尝试将对象作为道具传递给组件。
父元素:-试图将状态传递给汇总组件
class Dash_overview extends React.Component{
constructor(props){
super(props)
this.state = {
companies: {
title: 'companies on record',value: null,messurement: 'Companies'
},earning: {
title: 'total earning',messurement: 'mill'
}
}
}
render(){
return (
<div className="overview-container">
<div className="totals">
<Totals values={this.state.companies}/>
<Totals values={this.state.earning}/>
</div>
</div>
)
}
}
子组件-将使用传递给它的值
class Totals extends React.Component{
constructor(props){
super(props)
this.state = {
}
}
render(){
return (
<div className="totals_comp">
<h3>{companies.title}</h3>
<h3>{companies.value}</h3>
<h3>{companies.messurement}</h3>
</div>
)
}
}
-
我可能犯了一个愚蠢的错误,但是我尝试了几种不同的尝试,但均未成功,因此真的很有价值有人指出我要去哪里。 :)
预先感谢, 沃利
解决方法
您可以将状态值传播到子组件的props中,对象键将是组件内使用的prop名称。
<Totals {...this.state.companies}/>
<Totals {...this.state.earning}/>
或显式传递prop值
const { messurement,title,value } = this.state.companies;
...
<Totals
messurement={messurement}
title={title}
value={value}
/>
<Totals
messurement={messurement}
title={title}
value={value}
/>
然后在子级中通过道具访问
<div className="totals_comp">
<h3>{this.props.title}</h3>
<h3>{this.props.value}</h3>
<h3>{this.props.messurement}</h3>
</div>
问题
values={this.state.companies}
获取状态对象的值,并将其分配给名为values
的prop,但是在子组件中您根本没有引用它。例如props.values.title
。
由于您要传递{title:'记录中的公司',value:null,messsurement:'Companies'}作为价值支持,因此您应该使用其他组件的价值。如果您想使用公司名称,请执行以下操作:
<div className="overview-container">
<div className="totals">
<Totals companies={this.state.companies}/>
<Totals companies={this.state.earning}/>
</div>
</div>
,然后对“总计”组件执行此操作:
const {companies}=this.props
render(){
return (
<div className="totals_comp">
<h3>{companies.title}</h3>
<h3>{companies.value}</h3>
<h3>{companies.messurement}</h3>
</div>
)}
,
尝试一下。
const { title,value,messurement } = this.props.values;
render(){
return (
<div className="totals_comp">
<h3>{title}</h3>
<h3>{value}</h3>
<h3>{messurement}</h3>
</div>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。