Question

我对React很新，但幸运的是，到目前为止，我已经能够通过文档解决我的大部分问题。我目前卡住了，可以使用一些帮助。

目标是使用loadFeaturedPlaylist()组件中的prop值作为参数调用此全局函数Tracklist，但最终发生的是Tracklist组件都使用相同的prop值呈现

以下是我如何设置Tracklist组件：

export class Tracklist extends React.Component {
    static propTypes = {
       loadFeaturedPlaylist: React.PropTypes.func,
       playList: React.PropTypes.number,
       trackList: React.PropTypes.string
    }

    constructor(props) {
      super(props);
      this.props.loadFeaturedPlaylist(this.props.trackList, this.props.playList);
    }

    render() { 
        return(...);
    }
}

以下是我计划渲染2个不同播放列表的页面：

export class ListenPage extends React.Component {  

 render() {

    return (
      <div>
        <section>
          <Tracklist trackList={'featured'} playList={64347989} />
        </section>

        <section>
          <Tracklist trackList={'ambient'} playList={49422646} />
        </section>
      </div>
    );
  }
}

我已尝试componentWillReceiveProps()作为解决方案，但无处可去。所以我的问题是，loadFeaturedPlaylist()函数和核心API代码是一个更深层次的问题，还是有React.Component解决方案？

编辑：这是参考函数：

  loadFeaturedPlaylist: (tracklist, playlist) => ({
    type: playlistActions.LOAD_FEATURED_TRACKS,
    payload: {
      tracklistId: tracklist,
      playlistId: playlist
    }
  })

Answer 1

我必须说这是一个很好的问题。至少有一个语法项：

constructor(props){
// missing } ----->

主要问题是你的道具类型是静态的。

static propTypes = {
       loadFeaturedPlaylist: React.PropTypes.func,
       playList: React.PropTypes.number,
       trackList: React.PropTypes.string
    }

这就是为什么它们在所有实例之间共享：

<section>
    <Tracklist trackList={'featured'} playList={64347989} />
</section>

<section>
    <Tracklist trackList={'ambient'} playList={49422646} />
</section>

Answer 2

这里也很新鲜。我有同样的问题Doron Brikman，但假设函数正确地进入组件...如果你给<Tracklist>一个componentDidMount()生命周期钩子并将你的函数放在那里，而不是在构造函数中怎么办？？

componentDidMount() {
  this.props.loadFeaturedPlaylist(this.props.trackList, this.props.playList);
}

两个React组件都使用第二个组件的Prop值进行渲染

2 个答案: