3

Meteor 1.3 を楽しみにしているので、React コンポーネントをグローバルとして持つ代わりにインポートできます。

このチュートリアル ( https://voice.kadira.io/getting-started-with-meteor-1-3-and-react-15e071e41cd1 ) に従っていると、React-Layout の代わりに React-mounter を使用する必要があることに気付きました。カディラ

これらのドキュメントは次のとおりです。

https://github.com/kadirahq/react-mounter

React コンポーネントは次のように定義されていることがわかります。

const MainLayout = ({content}) => (
    <div>
      <header>
        This is our header
      </header>
      <main>
        {content}
      </main>
    </div>
);

このようなものの代わりに

MainLayout = React.createClass({
  propTypes: {
    content: React.PropTypes.element
  },
  render() {
    return (
      <div>
        <header>
          This is our header
        </header>
        <main>
          {this.content}
        </main>
      </div>
    );
  }
});

ここで何が起こっているのか説明してもらえますか? また、この新しいスタイルをどのように使用しますか? すべてのプロパティ、メソッド、ミックスインなどを定義する場所は?

また、副次的な質問として、React が を使用する代わりに npm パッケージとして追加されていることに気付きましたMeteor add react。これは、今すぐ反応を追加する方法ですか?

4

1 に答える 1

4

コンポーネントは、コンテナーとプレゼンテーション コンポーネントの 2 つのタイプに分類できます。

詳細については、これを参照してください

React v0.14 では、機能コンポーネントと呼ばれるものが導入されました。これは、クラス インスタンスではなく関数を介して作成されるプレゼンテーション コンポーネントです。これらはプレゼンテーション用のコンポーネントであるため、メソッドやミックスインなどを追加することは意図されておらず、データを表示するだけです。

React v0.14 と ES2015 を使い続けたい場合は、次のようなコンポーネントを作成できます。

class Component extends React.Component {
  componentWillReceiveProps(nextProps) {
    console.log('componentWillReceiveProps', nextProps.data.bar);
  }
  render() {
    return <div>Bar {this.props.data.bar}!</div>;
  }
}

これで、状態、その他のイベント ハンドラー、およびその他のメソッドを持つことができる完全なコンポーネントができました。

ここで注意すべき非常に重要なことは、ES2015 構文では、継承または機能合成を優先するため、ミックスインが許可されないということです。

それが役立つことを願っています!

React with Meteor を使用したことがないため、副次的な質問についてはお答えできません。

于 2016-02-15T23:24:13.953 に答える