Javascript 如何制作通用'；过滤器'；React.js中的高阶组件？

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

我的想法是

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

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

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)

我该怎么办

编辑：

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

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

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

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)

generateList（）不是被动的。当搜索词被更改时，它不会被触发

SearchResults应该是有状态的，容器组件也应该是有状态的。列表组件应该通过接收作为道具的搜索词来响应搜索词中的更改。generateList应该是列表组件的组件WillReceiveProps的功能。

generateList（）不是被动的。当搜索词被更改时，它不会被触发

---

SearchResults应该是有状态的，容器组件也应该是有状态的。列表组件应该通过接收作为道具的搜索词来响应搜索词中的更改。generateList应该是componentWillReceiveProps的功能列表组件。

包装器函数中的“state.searchTerm”是什么？我感觉你是说这个。道具。搜索术语。此外，es6类中不需要空构造函数。此外，这项工作最好由容器上MapStateTrops中的选择器来完成

编辑：

---

此外，您需要包装实际的“哑”组件，而不是连接调用的结果。这样，您的redux存储将连接到您的过滤器组件，并且在您更改存储时将重新提交

包装器函数中的“state.searchTerm”是什么？我感觉你是说这个。道具。搜索术语。此外，es6类中不需要空构造函数。此外，这项工作最好由容器上MapStateTrops中的选择器来完成

编辑：

---

此外，您需要包装实际的“哑”组件，而不是连接调用的结果。这样，您的redux存储将连接到您的过滤器组件，并且在您更改存储时将重新提交

让我们首先将组件看作一个函数，它接受一个道具并返回一个虚拟DOM

因此，SearchResult组件采用了以下支柱：

• 过滤列表
• 搜索词
• 设置搜索项

由

connect（）

创建的高阶组件提供以下支持：

• 搜索词
• 货币清单

Filter（）

高阶组件：

• 接受现金清单
• 提供筛选列表

因此，您必须像这样对其进行布线，以便每个部件都能接收到所需的道具：

connect（…）

→ <代码>过滤器→ <代码>搜索结果

应该是这样的：

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

或者如果使用

重新组合

：

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

export default enhance(SearchResult)

compose（）

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

---

---

请注意，

FilterComponent#generateList

中的

state.searchTerm

应该是

this.props.searchTerm
让我们首先将组件看作一个函数，它接受一个props并返回一个虚拟DOM

因此，SearchResult组件采用了以下支柱：


过滤列表
搜索词
设置搜索项

由
connect（）
创建的高阶组件提供以下支持：


搜索词
货币清单

Filter（）
高阶组件：


接受现金清单
提供筛选列表

因此，您必须像这样对其进行布线，以便每个部件都能接收到所需的道具：

connect（…）
→ <代码>过滤器

→ <代码>搜索结果

应该是这样的：

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

或者如果使用

重新组合

：

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

export default enhance(SearchResult)

compose（）

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

---

---

请注意，

FilterComponent#generateList

中的

state.searchTerm

应该是

this.props.searchTerm

对我来说并不太糟糕。该错误是否可能与周围的接线代码有关？你是如何申请这个职位的？也许你可以进一步隔离这个bug。那么最终的解决方案是什么样的呢？有样品吗？我觉得还不错。该错误是否可能与周围的接线代码有关？你是如何申请这个职位的？也许你可以进一步隔离这个bug。那么最终的解决方案是什么样的呢？是的，这基本上是我无法理解的。我在我原来的帖子中提供了额外的信息。{…this.props}是错误的。它指向FilterComponent的道具，道具是空的。过滤功能不整洁。最好在SearchResults组件中编写一个组件WillReceiveProps，该组件将执行筛选。searchTerm对于SearchResults组件来说是本地的，因此将其放入Redux存储区是没有意义的。除非有其他组件依赖于searchTerm，否则不需要为它创建操作。为什么{…this.props}错了？我假设它将

searchTerm

和

setSearchTerm

传递给它正在接收的搜索结果。我没有在SearchResults中实现过滤器逻辑，因为我想使其通用。我将

searchTerm

放入存储中，以便更高的组件可以对其作出反应。如果是这样，请连接..（筛选（SearchResults））。通过HOC连接。是的，这基本上是我无法理解的。我在我原来的帖子中提供了额外的信息。{…this.props}是错误的。它指向FilterComponent的道具，道具是空的。过滤功能不整洁。最好写下来