Question

我正在开发一个使用react-typeahead并尝试为下拉列表实现自定义组件的项目。 React-typeahead接受customListComponent prop。

但是，我需要将prop传递给传递给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函数接受paren't状态作为输入并返回react组件，如下所示：

//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;

现在我可以将此功能直接输入到预先输入组件中：

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

您可以通过SearchOrderComponent从Typeahead组件中访问this.props.children。

将组件作为prop传递给另一个组件时，反应不变违规

1 个答案: