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，每个代表不同的点击次数。

希望这会有所帮助：）

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

1 个答案: