我正在我的 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)
最佳答案
让我们首先将组件视为一个接受 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
。
关于javascript - 如何在React.js中制作通用的 'filter'高阶组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38542272/