2

在显示单个项目时，我有点坚持使用 Meteor、Flowrouter 和 React。一直在尝试几种解决方案，但不知道如何将 ID 传输到我的 React 类并且无法真正找到任何信息。非常感谢朝着正确的方向推动以帮助理解如何正确地做到这一点

我的路线看起来像这样

FlowRouter.route('/video/:_id', {
    name: "video",
    action(pathParams, queryParams) {
        console.log("Got the postId from the URL:", pathParams._id);
        console.log("Query parameters:", queryParams);
        ReactLayout.render(App, {
            content: <Play />
    });
}
});

所以这可以帮助我获取 ID，然后在我的 Play React 类中我有这个代码

Play = React.createClass({
  renderPlay() {
    return Videos.findOne(FlowRouter.getParam("_id"));
  }, 
  render() {
    return (
      <div className="container">
      {this.renderPlay()}
      </div>
    );
  }
});

但我真正想做的是将信息传递给我的 React Clip 类，并将值放入变量中。

Clip = React.createClass({
  getDefaultProps: function () {
    return {
      src : 'https://www.youtube.com/embed/',
      width: 1600,
      height: 900
    }
  },
  propTypes: {
    video: React.PropTypes.object.isRequired
  },
  render() {
    return (

      <iframe
      src={this.props.src + this.props.video.videoId} frameBorder={ 0 }>
      </iframe>
    );
  }
});

为此，我需要在我的 Play 课程中加入类似的内容。

  renderVideo() {
    // Get tasks from this.data.tasks
    return this.data.videos.map((video) => {
        return <Clip key={video._id} video={video} />;
    });
  },

很想了解如何正确地做到这一点，了解这个堆栈确实是朝着正确方向迈出的一大步。

欢迎使用涵盖 Meteor + React + kadira:Flowrouter + kadira:ReactLayout 的教程和指南来处理不仅仅是单页应用程序。

4

0 回答 0