javascript - 如何在React.js中制作通用的 'filter'高阶组件？

Question

我正在我的 React.js (+ Redux) 应用程序中制作一个高阶组件，以抽象使用从输入元素接收到的字符串来过滤元素列表的功能。

我的过滤 HOC 是，

filter.js

import React, { Component } from 'react'

export default function Filter(FilteredComponent) {
  return class FilterComponent extends Component {
    constructor(props)  {
      super(props)      
    }

    generateList() {
      if (this.props.searchTerm !== undefined)  {
        let re = new RegExp(state.searchTerm,'gi')
        return this.props.currencyList.filter((c) => c.match(re))
      }
      else {
        return this.props.currencyList
      }
    }

    render() {
      return (
        <FilteredComponent
          filteredList={this.generateList()}
          {...this.props}
        />
      )
    }
  }
}

现在，我无法在 SearchResults 组件中以 props.filteredList 的形式访问filteredList。

显示列表的组件是

SearchResults.js

import React from 'react'

const SearchResults = (props) => {
  const listData = props.filteredList.map (item => <div>{item}</div>)

  return (
    <div>
      Here are the search results.
      <br />
      <input
        type="text"
        value={props.searchTerm}
        onChange={props.setSearchTerm}
      />
      {listData}
    </div>   ) }

export default SearchResults

我该如何继续这件事？

编辑:

添加容器组件以提高清晰度:

SearchContainer.js

import {connect} from 'react-redux'
import SearchResults from '../components/SearchResults'
import * as a from '../actions'
import Filter from '../enhancers/filter'

const getSearchTerm = (state) => (state.searchTerm === undefined) ? '' : state.searchTerm

const mapStateToProps = (state) => {
  return  {
    searchTerm: getSearchTerm(state),
    currencyList: state.currencyList
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    setSearchTerm: (e) => {
      dispatch(a.setSearchTerm(e.target.value))
    }
  }
}

const SearchResultsContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(SearchResults)

export default Filter(SearchResultsContainer)

Answer 1

让我们首先将组件视为一个接受 props 并返回 Virtual DOM 的函数。

因此 SearchResult 组件采用以下属性:

• 过滤列表
• 搜索词
• 设置搜索术语

由 connect() 创建的高阶组件提供以下属性:

• 搜索词
• 货币列表

Filter() 高阶组件:

• 获取货币列表
• 提供过滤列表

因此，您必须像这样连接它，以便每个部分都能收到它需要的 Prop :

connect(...) → Filter → SearchResult

它应该看起来像这样:

export default connect(...)(Filter(SearchResult))

或者如果您使用recompose:

const enhance = compose(connect(...), Filter)

export default enhance(SearchResult)

compose() 从右到左包装组件。因此，最左边的高阶分量成为最外面的分量。这意味着 Prop 将从左向右流动。

<小时/>

请注意，FilterComponent#generateList 中的 state.searchTerm 应为 this.props.searchTerm。