Reactjs 两个React组件都使用第二个组件&x27；s道具值

我是个新手，但幸运的是，到目前为止，我已经能够通过文档解决大部分问题。我现在陷入困境，需要一些帮助

目标是使用

Tracklist

组件中的prop值作为参数调用此全局函数

loadFeaturedPlaylist（）

，但最终发生的情况是，两个

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

---

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

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>

---

这里也很新。我也有Doron Brikman的问题，但是假设函数正确地进入组件。。。如果给

一个

componentDidMount（）

生命周期钩子，并将函数放在那里，而不是放在构造函数中，会怎么样

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

---

您在哪里将此函数作为道具发送到此组件，以及在哪里定义它？因此，这会像我当前的方法一样正确地将函数调用到组件中，但主要问题仍然存在于复制的播放列表中。

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