Javascript Redux访问MapStateTops中对象列表中的正确项

这就是我遇到的问题。我必须将

id={this.props.id}

传递给每个组件，以便通过查看自己的道具，从

mapStateToProps

中的玩家列表中获得正确的玩家

这些AudioPlayer组件将由开发人员提供，因此我不希望他们必须像我目前所做的那样向每个组件传递id

我不能仅仅使用React的上下文，因为mapStateToProps没有公开上下文，因为它是实验性的

我知道我可以在每个组件（GUI、媒体等）中使用React.CloneElement，但这似乎也很有用

我的问题是：

我怎样才能从列表中获得正确的播放器，而不必像下面的代码那样将id传递给我的每个组件

如果

mapstatetops

接受了

context

param，那么我就可以从每个组件的上下文中获取id并向下传递一次

这是一种更好的方法吗

开发人员定义的音频播放器：

class AudioPlayer extends React.Component {
    render() {
        return (
            <Player className="jp-default" id={this.props.id}>
                <Gui id={this.props.id}>
                    <Media id={this.props.id}>
                        <Audio id={this.props.id}>                           
                        </Audio>
                    </Media>
                    <div className="poster-container">
                        <Poster id={this.props.id}/>
                        <Title id={this.props.id}/>
                    </div>
                </Gui>             
            </Player>
        );
    }
}

AudioPlayer.options = {
    id: "audio-player",
    paused: true,
    //...etc
};

class AudioPlayerTwo extends React.Component {
    render() {
        return (
            <Player className="jp-default-two" id={this.props.id}>
                <Gui id={this.props.id}>
                    <Media id={this.props.id}>
                        <Audio id={this.props.id}>                        
                        </Audio>
                    </Media>
                    <div className="poster-container">
                        <Poster id={this.props.id}/>
                        <Title id={this.props.id}/>
                    </div>
                </Gui>             
            </Player>
        );
    }
}

AudioPlayerTwo.options = {
    id: "audio-player-two,
    paused: true,
    //...etc
};

createPlayers([AudioPlayer, AudioPlayerTwo]);

减速器：

const play = (state, action) => {
    if(state.srcSet) {
        return updateObject(state, {
            paused: false,
            newTime: !isNaN(action.time) ? action.time : state.currentTime 
        });
    }
}

export default (state={}, action) => {
    //Only update the correct player
    const currentPlayer = state[action.id];
    let newState = {...state};

    switch (action.type) {; 
        case actionTypes.player.PLAY: 
            newState = play(currentPlayer, action);
            break;
        default:
            return state;
    }

    return updateObject(state, {
        [action.id]: newState
    });
}

我的所有组件看起来都类似于此： 注意我是如何使用道具

id

从列表中访问正确的播放器的

const mapStateToProps = (state, props) => ({
    paused: state.players[props.id].paused,
    id: props.id
});

const Play = (props) => {
    const onPlayClick = () => props.paused ? props.dispatch(play(props.id)) : props.dispatch(pause(props.id))
    return <a onClick={onPlayClick}>{props.children}</a>
}

export default connect(mapStateToProps)(Play);

const-mapStateToProps=（状态，道具）=>({
暂停：状态。玩家[props.id]。暂停，
id:props.id
});
常量播放=（道具）=>{
const onPlayClick=（）=>props.paused？props.dispatch（play（props.id））：props.dispatch（pause（props.id））
返回{props.children}
}
导出默认连接（MapStateTops）（播放）；

您可以在userland中解决这个问题，方法是在

connect

+

getContext

（from）上制作自己的包装器，并在应用程序中使用它，而不是在vanilla connect中使用。看起来像

import { connect } from 'react-redux'
import { compose, getContext } from 'recompose'
export default function connectWithMyId(...args) {
  return compose(
    getContext({ myId: PropTypes.string }),
    connect(...args)
  )
}

---

然后，

myId

将作为您的

MapStateTrops

中的一个道具提供，您可以在userland中通过在

connect

+

getContext

（from）上制作自己的包装器来解决这个问题，并在应用程序中使用它，而不是vanilla connect。看起来像

import { connect } from 'react-redux'
import { compose, getContext } from 'recompose'
export default function connectWithMyId(...args) {
  return compose(
    getContext({ myId: PropTypes.string }),
    connect(...args)
  )
}

---

然后，

myId

将作为您的

mapStateToProps

中的道具提供

这个问题只是问如何处理深度嵌套的道具吗？这有点令人困惑，因为我们不知道什么是“选择器”或“玩家”。如果组件需要知道其选择器才能渲染，我认为将其作为道具传递到树下没有问题。@AndyRay选择器只是唯一的id。我真的不知道如何更好地解释它，抱歉。播放器只是一个组件（音频播放器）。选择器可以被视为实用功能。它们还与减速器一起出现。您可以从reducer模块中公开它们，然后将它们导入组件中。如果您觉得从组件访问reducer模块不合适，您可以为选择器创建一个单独的模块。将

选择器

名称更改为

id

，这个问题只是问如何处理深度嵌套的道具吗？这有点令人困惑，因为我们不知道什么是“选择器”或“玩家”。如果组件需要知道其选择器才能渲染，我认为将其作为道具传递到树下没有问题。@AndyRay选择器只是唯一的id。我真的不知道如何更好地解释它，抱歉。播放器只是一个组件（音频播放器）。选择器可以被视为实用功能。它们还与减速器一起出现。您可以从reducer模块中公开它们，然后将它们导入组件中。如果您觉得从组件访问减速器模块不合适，可以为选择器创建单独的模块。将

选择器

名称更改为

id

import { connect } from 'react-redux'
import { compose, getContext } from 'recompose'
export default function connectWithMyId(...args) {
  return compose(
    getContext({ myId: PropTypes.string }),
    connect(...args)
  )
}