首页 文章

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

提问于
浏览 次
0

我正在开发一个使用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;

现在我可以将此函数直接输入到typeahead组件中：

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

但这感觉就像是组件API的突破 . 有没有更直接/正确的方法来做到这一点？

reactjs components typeahead

1 回答

  • 1

    如果我理解你想要达到的目标，最直接的方法就是

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

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

    回复于

相关问题