1

我对 React 和 Redux 都很陌生，我不确定我正在处理的案例的最佳实践和技术解决方案。我在这里使用 Dan Abramov 定义的“组件”和“容器” 。

我正在处理的组件是一小部分过滤器组件：一个输入文本字段和两个按钮，它们都过滤实体列表。我尝试了两种方法：

第一种方法：单个组件包含两种容器的三个实例，容器连接到相应的组件。

这是我第一次做的。在这里，根组件如下所示：

import React, { PropTypes, Component } from 'react';
import Config from '../../config';
import FilterInput from '../containers/FilterInput';
import FilterLink from '../containers/FilterLink'

class FilterController extends Component {
    render() {
        return (
            <div className='filterController'>
                <FilterInput displayName="Search" filterName={Config.filters.WITH_TEXT} />
                <FilterLink displayName="Today" filterName={Config.filters.IS_TODAY} />
                <FilterLink displayName="On TV" filterName={Config.filters.ON_TV} />
            </div>
        )
    }
}
export default FilterController;

这里引用的两个容器看起来和预期的差不多，连接的组件也是如此。我将以 FilterLink 为例：

import React, { PropTypes, Component } from 'react';
import {connect} from 'react-redux';
import {toggleFilter} from '../actions';
import FilterButton from '../components/filterbutton'

const mapStateToProps = (state, ownProps) => {
    return {
        active: !!state.program.filters[ownProps.filterName]
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        onClick: () => {
            dispatch(toggleFilter(ownProps.filterName, ownProps.input))
        }
    }
}

const FilterLink = connect(
    mapStateToProps,
    mapDispatchToProps
)(FilterButton)

export default FilterLink

以及对应的FilterButton组件：

import React, { PropTypes, Component } from 'react';

class FilterButton extends Component {

    render() {
        return (
            <button className={this.props.active ? 'active' : ''}
                    onClick={this.props.onClick}>
                {this.props.displayName}
            </button>
        )
    }
}

FilterButton.propTypes = {
    active: PropTypes.bool.isRequired,
    displayName: PropTypes.string.isRequired,
    onClick: PropTypes.func.isRequired,
    filterName: PropTypes.string.isRequired
};

export default FilterButton;

这种方法有效，但我认为没有必要创建两个不同的容器。这再次引导我进行第二次尝试。

第二种方法：包含多个组件的单个容器。

在这里，我做了一个更大的容器：

import React, { PropTypes, Component } from 'react';
import Config from '../../config';
import {connect} from 'react-redux';
import {toggleFilter} from '../actions';
import FilterButton from '../components/filterbutton'
import FilterInput from '../components/filterinput'

class FilterContainer extends Component {
    render() {
        const { active, currentInput, onChange, onClick } = this.props;
        return (
            <div className='filterController'>
                <FilterInput displayName="Search" filterName={Config.filters.WITH_TEXT} currentInput={currentInput} onChange={onChange} />
                <FilterButton displayName="Today" filterName={Config.filters.IS_TODAY} active={active} onClick={onClick}/>
                <FilterButton displayName="On TV" filterName={Config.filters.ON_TV} active={active} onClick={onClick}/>
            </div>
        )
    }
}

const mapStateToProps = (state, ownProps) => {
    return {
        active: !!state.program.filters[ownProps.filterName],
        currentInput: state.program.filters[ownProps.filterName] ? state.program.filters[ownProps.filterName].input : ''
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        onClick: () => {
            dispatch(toggleFilter(ownProps.filterName, ownProps.input))
        },
        onChange: newValue => {
            dispatch(toggleFilter(ownProps.filterName, newValue.target.value))
        }
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(FilterContainer);

在这里，整个组件的所有状态交互都集中在一个组件中。这里的组件与第一种方法中的相同。然而，这并没有真正起作用：ownProps 在 mapStateToProps 和 mapDispathToProps 中都是空的。我可能误解了 react-redux 连接的工作原理。

所以，考虑到这些事情，我有两个问题：就容器和组件而言，构建这个组件的最佳方式是什么？其次，为什么 ownProps 在第二种方法中的工作方式与第一种方法不同？

感谢您的时间。

4

1 回答 1

1

目前不确定我是否有关于结构的具体答案。至于“ownProps”，它表示由其父组件专门传递给给定组件的道具。由于您正在使用connect()FilterController，这意味着“ownProps”将来自您渲染该组件的任何位置，例如：return <FilterController prop1="a" prop2={someVariable} />。

根据您编写这些映射函数的方式，看起来您确实想要连接 FilterInput 和 FilterButton 组件而不是 FilterController。

于 2016-04-06T16:51:29.207 回答