将很多道具传递给子组件是否可以（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>
        );

我非常依赖这个组件，很有可能道具列表会不断增长。

有没有比通过 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，每个代表各种点击。

希望这对您有所帮助:)

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

Is it OK to pass a lot of props to a child component (redux)

react-native

redux

react-props