在呈现到查看后从对象数组中获取记录

Question

我有一个组件，它将javascript对象作为props传递给另一个组件进行渲染。将记录呈现为div 后，我想取回单击的对象记录，以便在第三个组件中显示它。

每个对象都包含多个名称-值对，但我最初只使用有限的字段进行显示。我坚持用所有值取回整个对象。我是 React 的新手，所以任何帮助都值得赞赏。下面是代码：

export class ViewList extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
if (this.props.configs) {
let summaryDisplay = this.props.configs.map((config) =>
<ConfigSummary
key={config.id}
config={config}
onViewConfigClick={this.props.onViewConfigClick}
/>);
} else
return (null);
}
}
class ConfigSummary extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div className="row">
<div className={cSummarySm}> {this.props.config.direction} </div>
<div className={cSummaryMd}> {this.props.config.Object} </div>
<div className={cSummarySm}> {this.props.config.version} </div >
<div className={cSummaryLg}> {this.props.config.jobShortDescription} </div >
<div className={cSummarySm}> <button className="btn btn-link" onClick={this.props.onViewConfigClick}>View</button></div >
</div>);
}
}

单击视图按钮时，我调用祖父组件，然后调用父组件以在展开视图中显示所选记录。

Answer 1

您必须在onClick函数中传递一些参数。

你可以这样做：

onClick={()=>this.props.onViewConfigClick(this.props)}

这会将所有参数传递到祖父函数中。

你还传递了 id：

onClick={()=>this.props.onViewConfigClick(this.props.id)}

我的提示：将 id 作为对象传递，以便以后可以在需要时更轻松地扩展函数参数：

onClick={()=>this.props.onViewConfigClick({
id: this.props.id
})}