如何在React.js中制作通用的“过滤器”高阶组件？

Question

I am making a Higher-Order Component in my React.js (+ Redux) app, to abstract the functionality to filter a list of elements with the string received from an input element.

My filtering HOC is,

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

Right now, I am unable to access the filteredList as props.filteredList in the SearchResults component.

The component to display the list is

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

How do I go on about this?

EDIT:

Adding the container component for greater clarity:

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

Let's first think of components as a function that takes a props and returns a Virtual DOM.

Thus the SearchResult component takes these props:

• filteredList
• searchTerm
• setSearchTerm

The higher-order-component created created by connect() provides these props:

• searchTerm
• currencyList

The Filter() higher-order component:

• takes currencyList
• provides filteredList

Therefore, you have to wire it like this so that each part receives the props it needs:

connect(...) → Filter → SearchResult

It should look like this:

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

Or if you use recompose :

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

export default enhance(SearchResult)

compose() wraps the components from right to left. Therefore, the leftmost higher-order component becomes the outermost one. This means the props will flow from left to right.

---

Please note that state.searchTerm in FilterComponent#generateList should be this.props.searchTerm .

Answer 2

What is 'state.searchTerm' in your wrapper function? I have a feeling you mean this.props.searchTerm. Also, you don't need an empty constructor in es6 classes. Also, this is work better done by a selector in your mapstatetoprops on the container.

Edit: Also, you need to wrap the actual 'dumb' component, not the result of your connect call. That way your redux store is connected to your Filter component and will be rerendered when you're store changes.

Answer 3

generateList() is not reactive. It does not get triggered when the search term is changed.

SearchResults should be stateful and the container component. The list component should respond to change in the search term by receiving the search term as props. generateList should be the functionality of componentWillReceiveProps of the list component.