searchkit - 如何将道具传递给 itemComponent 组件答案

【问题标题】：searchkit - how to pass props into an itemComponent componentsearchkit - 如何将道具传递给 itemComponent 组件
【发布时间】：2017-03-29 15:00:45
【问题描述】：

我对 React 还很陌生，我真的很感激能在这方面提供一些帮助，因为它让我发疯了。

我试图弄清楚如何将道具从<ViewSwitcherHits/> 组件传递到searchkit 的listComponent。

父组件：

<ViewSwitcherHits 
hitComponents={[
    {key:"query", title:"Query", listComponent:QueryDetailView, defaultOption:true}
]}
/>

所以QueryDetailView 是我创建的一个自定义组件，它需要道具才能显示所选查询的详细视图。用户从另一个组件的下拉列表中选择一个查询块，然后选择的过滤器将显示在QueryDetailView 组件中。可能有更好的方法将选定的查询对象从子级传递给父级，然后再传回QueryDetailView 子级。我来自 Angular，所以我知道一个服务将是完美的，但不确定如何在 React 中实现。或者，如果 Searchkit 甚至允许将 props 传递到 ItemComponent。

我希望这是足够的信息。如果没有，请告诉我，我会添加更多代码。谢谢！

【问题讨论】：

你可以将 child 传递给这样的组件：。您可以通过 this.props.children 在 AwesomeComponent 中访问该组件。如果你想向 this.props.children 添加道具，请执行以下操作：{React.cloneElement(this.props.children, { loggedIn: this.state.loggedIn })}
那么 AwesomeComponent 充当 QueryDetailView 的包装器？您能否展示一个更充实的 React.cloneElement 示例？

标签： javascript reactjs searchkit

【解决方案1】：

尝试将带有属性的 QueryDetailsView 分配给变量/常量，然后将其用作 listComponent。 searchkit 属性和您的属性将被合并，因此在 QueryDetailsView 中您将能够访问 this.props.oneprop 和 this.props.anotherprop：

const qdv = (<QueryDetailView oneprop="somevalue" anotherprop="anothervalue" />);

<ViewSwitcherHits 
hitComponents={[
    {key:"query", title:"Query", listComponent:qdw, defaultOption:true}
]}
/>

【讨论】：