searchkit - itemComponent 구성 요소에 소품을 전달하는 방법

나는 반응이 매우 새롭다. 그리고 이것에 관해서는 정말 도움이된다.searchkit - itemComponent 구성 요소에 소품을 전달하는 방법

나는 <ViewSwitcherHits/> 구성 요소에서 검색 키트의 listComponent으로 소품을 전달할 수있는 방법을 알아 내려고하고 있습니다.

부모 구성 요소 :

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

그래서 QueryDetailView 내가 그 선택된 쿼리의 상세보기를 표시하기 위해 소품을 필요로 만든 사용자 지정 구성 요소입니다. 사용자가 다른 구성 요소의 드롭 다운에서 쿼리 블록을 선택하면 선택한 필터가 QueryDetailView 구성 요소에 표시됩니다. 선택한 쿼리 개체를 자식에서 부모로 QueryDetailView 자식으로 다시 전달하는 더 좋은 방법이있을 수 있습니다. 저는 Angular에서 왔습니다. 서비스가 이것에 완벽 할 것이라는 것을 알았지 만, React에서 구현하는 방법을 모르겠습니다. 또는 Searchkit이 심지어 ItemComponent으로 소품을 통과시키는 것을 허용하는 경우.

충분한 정보가되기를 바랍니다. 그렇지 않은 경우 알려 주시면 더 많은 코드를 추가하겠습니다. 감사!

출처

2017-03-29 mcastre

당신은 그와 같은 구성 요소에 아이를 전달할 수 있습니다 : 당신이 this.props.oneprop과 this.props.anotherprop에 액세스 할 수있을 것입니다 QueryDetailsView 내부 있도록 searchkit 속성과 특성은 병합됩니다 를 클릭하십시오. this.props.children을 사용하여 AwesomeComponent에서이 구성 요소에 액세스 할 수 있습니다. 만약 당신이 this.props.children에 소품을 추가하고 싶다면 다음과 같이하십시오 : {React.cloneElement (this.props.children, {loggedIn : this.state.loggedIn})} – Kornflexx

그래서 AwesomeComponent는 QueryDetailView의 래퍼 역할을합니까? React.cloneElement에 대해 좀 더 세련된 예제를 보여줄 수 있습니까? – mcastre

변수/상수에 속성이있는 QueryDetailsView를 할당 한 다음이를 listComponent로 사용하십시오.

이

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

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

출처

2017-10-06 10:01:40 Olf

searchkit - itemComponent 구성 요소에 소품을 전달하는 방법

답변

관련 문제