reactjs - 将 props 中的对象值传递给另一个组件
问题描述
考虑下面的代码,我需要通过道具将对象格式的 id 传递给另一个组件。但是我尝试了很多次,但它不起作用。我想我可能有一些错误,但我不确定它在哪里。
主页(更新):
render(props){
const data = this.state.data;
return (
<div>
<Header />
<NavigationBar />
<PurchaseInfoView show={this.state.displayModal} closeModal={this.closeModal} value={this.openModal}/>
<div className="purchase-side">
<div className="side-title">
<h1>Purchase Order List</h1>
</div>
<hr class="solid" />
{
Object.keys(data).map((key) =>
<div className="list-item">
<h2 onClick= {() => this.openModal(data[key].id)}> //get id
{ data[key].item_name}
</h2>
</div>
)}
</div>
<div className="dads">
</div>
</div>
);
}
openModal(更新):
openModal = (id) => {
this.setState(
{
displayModal: true,
id: id
});
console.log(id) // i can get the id from here id=1
};
PurchaseInfoView 获取 id(更新)。
class PurchaseInfoView extends Component {
render() {
console.log(this.props.id) // get undefined
return (
<div className="Modal"
style={{
transform: this.props.show ,
opacity: this.props.show ? "1" : "0"
}}
>
<h3>Purchase Order detail</h3>
<p>Id: {this.props.id}</p> //cannot get it
</div>
);
}
}
export default PurchaseInfoView;
解决方案
如果要将对象传递给道具,请执行以下步骤:
- 在您的父母状态中定义对象。
- 调用组件时传入props中的对象
- 从孩子的道具中获取对象。
在这里你错过了第二步!
你应该试试这些:
主页
render(props){
const { data, modalObject, displayModal } = this.state; //use destructuring is more readable
return (
<div>
<Header />
<NavigationBar />
<PurchaseInfoView show={displayModal} closeModal={this.closeModal} modalObject={modalObject}/> //pass the object from destructuring state as props
<div className="purchase-side">
<div className="side-title">
<h1>Purchase Order List</h1>
</div>
<hr class="solid" />
{
Object.keys(data).map((key) =>
<div className="list-item">
<h2 onClick= {() => this.openModal(data[key].id)}> //get id
{ data[key].item_name}
</h2>
</div>
)}
</div>
<div className="dads">
</div>
</div>
);
}
开放式模式
openModal = (id) => {
this.setState(
{
displayModal: true,
modalObject: {id: id, ...any others key/val pair}
});
};
采购信息查看
class PurchaseInfoView extends Component {
render() {
const { modalObject} = this.props; //here get your object from props
console.log(modalObject.id);// here you have the object
return (
<div className="Modal"
style={{
transform: this.props.show ,
opacity: this.props.show ? "1" : "0"
}}
>
<h3>Purchase Order detail</h3>
<p>Id: {modalObject.id}</p>
</div>
);
}
}
如果您在评论中有任何问题,请告诉我;)
注意:如果您在模态中需要更多的东西而不仅仅是 id,我用一个对象(又名 {} )来做到这一点。如果只需要 id,您只需将 modalObject 替换为您需要的“id”
干杯!
编辑:要使此解决方案起作用,您必须:
至少将您的状态初始化为:
this.state={ modalObject : { id: ''}}
或在显示元素之前在子组件中进行非空测试,如下所示:
ID:{modalObject && modalObject.id ?modalObject.id:''}
这些是必需的,因为在第一次渲染时,您的状态将具有您设置的初始状态,因此如果您没有设置任何内容或没有测试值......好吧......它是未定义的!:)
(请注意,如果 id 为 null 而不是未定义的错误,您将在模态中显示一个空格)
推荐阅读
- php - 如何在执行函数之前等待 Swift 中的变量?(迅速)
- google-apps-script - 使用 Google Apps 脚本插入 YouTube 顶级评论
- java - 使用 java8 改进将对象列表转换为其他对象
- amazon-web-services - 我应该使用哪种 AWS 服务来处理大型文本文件?
- css - 在 wicked-pdf 中使用自定义(乌尔都语)字体
- laravel - Laravel 关系总数
- android - 如何进入下载文件夹加载所有图片?
- deep-learning - 碰上connect异常学习D4Lj例子
- java - Recyclerview 加载速度很慢
- c - typeof 定义中报告错误 - 未声明参数