コンポーネントを小道具として別のコンポーネントに渡すときに不変の違反が発生する

Question

react-typeaheadを使用し、ドロップダウンリストのカスタムコンポーネントを実装しようとしているプロジェクトで作業しています。 React-TypeaheadはcustomListComponentを受け取ります。

しかし、Typeaheadコンポーネントに渡されているコンポーネントに小道具を渡す必要があります。

//MainSearch.js 
import SearchOrderComponent from './SearchOrderComponent' 

export default class MainSearch extends React.Component { 
    //Constructor here 

    render() { 
     let customList = <SearchOrderComponent ranking={this.state.ranking} /> 
     return(
      <div className="search-container"> 
       <Typeahead customListComponent={customList} /> 
      </div> 
     ) 
    } 
} 

これは反応するコンポーネントが期待されていたことを示す反応して、不変違反を引き起こした：最初は、私は、カスタムコンポーネントのように変数を設定しようとしました。

//SearchOrderComponent.js 
const wrapper = function(ranking){ 
    let SearchOrder = React.createClass({ 
     render: function() { 
     var searchRanking = ranking.map(function(item){ 
      return <li key={item.key}>{item.value.niceName}</li> 
     }); 

     return(
      <div className='main-dropdown'> 
       {searchRanking} 
      </div> 
     ); 
     } 
    }); 
    return SearchOrder; 
} 

module.exports = wrapper; 

今私ができる先行入力コンポーネントに直接入力この機能を：：

私の現在の回避策はそうのように、入力としてparen't状態を受け入れ、反応コンポーネントを返す SearchOrderComponent機能を作ることです

//MainSearch.js 
<Typeahead customListComponent={SearchOrderComponent(this.state.ranking)} /> 

しかし、これはコンポーネントAPIからの休憩のような感じです。これを行うためのより直接的/適切な方法がありますか？

Answer 1

私はあなたが達成しようとしているものを、最も直接的な方法は

render() { 
    return(
     <div className="search-container"> 
      <Typeahead> 
      <SearchOrderComponent ranking={this.state.ranking} /> 
      </Typeahead> 
     </div> 
    ) 
} 

になり、正しく理解していればあなたはthis.props.children経由Typeaheadコンポーネント内からSearchOrderComponentにアクセスすることができます。