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 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 をカバーするチュートリアルとガイドは、単一ページのアプリ以上のものを扱うことができます。

4

0 に答える 0