Question

在显示单个项目时，我对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 Class中我有这个代码

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。

在Meteor + Flowrouter + React中显示单个项目

0 个答案: