Question

我正在尝试创建自定义Select组件，它的行为与普通的HTML select非常相似，但是我在将Select组件挂钩到redux以管理时遇到问题显示或隐藏选项列表。到目前为止，我已经开始工作，当在屏幕上放置多个Select组件时，当我点击其中任何一个时，它们都显示/隐藏了他们的选项列表。我到目前为止通过检查styled-component我的（简化）代码中的道具来切换实际的显示/隐藏 -

Select.jsx

const DropDown = styled.div`
    ...
    display: ${props => props.dropDownShown ? 'block' : 'none'};
    ...
`;

const Select = ({toggleDropDown, dropDownShown}) => (
    <div>
        <span class="input" onClick={() => toggleDropDown()}>
            <span>Item 1</span>
            <img src={selectArrowClear}/>
        </span>
        <DropDown dropDownShown={dropDownShown}>
            <Option>Item 1</Option>
            <Option>Item 2</Option>
            <Option>Item 3</Option>
        </DropDown>
    </div>
);

export default Select;

SelectContainer.jsx

const toggleDropDown = () => ({
    type: 'TOGGLE_DROP_DOWN'
});


const mapStateToProps = state => ({
    dropDownShown: state.select.dropDownShown
});

const mapDispatchToProps = dispatch => ({
    toggleDropDown: () => {
        dispatch(toggleDropDown());
    }
});

const SelectContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(Select);

export default SelectContainer;

SelectReducer.js

const initialState = { dropDownShown: false };

const select = (state = initialState, action) => {
    switch (action.type) {
        case 'TOGGLE_DROP_DOWN': {
            return Object.assign({}, state, {
                dropDownShown: !state.dropDownShown
            });
        }
        default: return state;
    }
};

export default select;

我需要做什么才能在同一个屏幕上呈现多个<SelectContainer />组件，这些组件可以相互独立地互动？

Answer 1

看起来我的架构过于复杂 - 在阅读https://github.com/reactjs/redux/issues/1287和@Sivadass N评论之后，我将使用Select管理setState的状态，并将redux留给更多全球行动。

Redux具有可重复使用的反应组分

1 个答案: