Javascript 渲染到视图后从对象数组中获取记录

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

每个对象都包含多个名称-值对，但我仅使用有限的字段进行初始显示。我一直在用所有值取回整个对象。我是一个新的反应，所以任何帮助都是感激的。代码如下：

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>);
    }
}

导出类视图列表扩展组件{
建造师（道具）{
超级（道具）；
此.state={
};
}
render（）{
if（this.props.configs）{
让summaryDisplay=this.props.configs.map（（配置）=>
);
}否则
返回（空）；
}
}
类ConfigSummary扩展了组件{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
返回(
{this.props.config.direction}
{this.props.config.Object}
{this.props.config.version}
{this.props.config.jobShortDescription}
看法
);
}
}

---

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

您必须在

onClick

函数中传递一些参数

你可以这样做：

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

这将把所有参数传递给祖父母函数

您还可以传递id：

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

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

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