是否可以将很多道具传递给子组件（redux）

Question

我有一个组件，其中有一个子组件。

这个子组件需要访问状态，并调度很多动作。所以我最终得到了一个组件，它通过他自己的 props 获取所有这些属性。

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>
        );

我非常依赖这个组件，而且道具列表很可能会一次又一次地增长。

除了通过 props 之外，还有什么更简洁的方法可以在子组件中访问商店？ 这样做可以吗？

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，每个都代表各种点击。

希望这会有所帮助:)