可以将很多道具传递给儿童组件(Redux)吗?

Question

我的组件中有一个子组件。

这个孩子的组件需要访问状态，并派遣许多动作。因此，我最终拥有一个通过他自己的道具占用所有这些属性的组件。

render(){
   const menu = <Menu
            navigator={navigator}
            userTracks={this.props.tracks}
            currentTrackID={this.props.currentTrack.id}
            onAddNewTrack={() => {this.props.addNewTrack()}}
            onEditTrack={(track) => {this.props.onEditTrack(track)}}
            onClearBeacons={(track) => {this.props.onClearBeacons(track)}}
            onDeleteTrack={(track) => {this.props.onDeleteTrack(track)}}/>;
        return(
            <SideMenu
                menu={menu}
                isOpen={this.props.sideMenuOpened}
                onChange={(state) => {this.props.changeSideMenuOpened(state)}}
                menuPosition='right'>
                ...more stuff...
            </SideMenu>
        );

我在此组件上非常依赖，而且道具清单很可能会不断成长。

除了通过道具以外，是否有任何更清洁的方法可以访问儿童组件中的商店？这样做可以吗？

Answer 1

您可以以以下方式降低代码：

onClick(type, data) {
    switch (type) {
        case 'addNewTrack':
            this.props.addNewTrack();
            break;
        case 'editTrack':
            this.props.onEditTrack(data.track);
            break;
        case 'clearBeacons':
            this.props.onClearBeacons(data.track);
            break;
        case 'deleteTrack':
            this.props.onDeleteTrack(data.track);
            break;
        default:
            break;
    }
}

render() {
    const menuProps = {
        navigator: navigator,
        userTracks: this.props.tracks,
        currentTrackID: this.props.currentTrack.id,
        onClick: this.onClick
    }
    const menu = <Menu {...menuProps} />
    return (
        <SideMenu
            menu={menu}
            isOpen={this.props.sideMenuOpened}
            onChange={(state) => { this.props.changeSideMenuOpened(state) }}
            menuPosition='right'>
            ...more stuff...
            </SideMenu>
    );
}

您可以看到数据道具被合并为对象，并扩展到<Menu />组件上。对于多种方法，我只单击一次。菜单组件将发送每个代表各种点击的type和data。

希望这会有所帮助：(