Reactチュートリアル覚書 その2

• 前回はこちら → Reactチュートリアル覚書 その1 - Qiita http://qiita.com/masarufuruya/items/9755673c6e9f796a8924

• 今回はUsing props〜Adding Markdownまでをやった。以下学びをまとめる

  • https://facebook.github.io/react/docs/tutorial.html

コンポーネントから別のコンポーネントを呼び出すことが出来る

• 覚書その1の時点ではコンポーネントの呼び出しはReactDOM.render時に行っていた

ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

• 今回の範囲ではCommentBoxコンポーネントから別のコンポーネントを呼び出す書き方が出てくるため、作ったコンポーネント同士で呼び出すことが出来ることを学んだ

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});

データは親コンポーネントで管理し、子コンポーネントは使うだけ

• コメントのデータ(作成者、作成日時、内容)をコンポーネントの外部から受けとり、表示を変えたい場合はpropsを使う
• propsを渡すには、コンポーネントを呼び出す時に渡したい名前の属性をつけてやる
• propsは親のコンポーネントから子のコンポーネントがデータを受け取るための手段
• 子コンポーネントがデータを更新してしまうと、どこでデータが変更されているか把握するのが困難になるので、データの管理は親コンポーネントで行う

参考URL: React.jsでPropやStateを使ってComponent間のやりとりをする - Qiita http://qiita.com/koba04/items/43200b6fd6e6f43f0d8d

JSX内の波括弧{}はJavascriptの値を出力したい時に使う

• {}内ではコンポーネント内で定義した変数、関数、グローバル変数、Reactの組み込みプロパティを取得して出力することができる
• {}内で変数を定義したり条件分岐させるようなコードはかけずあくまで取得のみに利用できる

render: function() {
  return (
    <div className="comment">
      <h2 className="commentAuthor">
        {this.props.author}
      </h2>
      <span dangerouslySetInnerHTML={this.rawMarkup()}></span>
    </div>
  );
}

サニタイズを無効にしたい場合はdangerouslySetInnerHTMLを使う

• dangerouslySetInnerプロパティをつけて__htmlキーの中にサニタイズを無効にしたいHTMLを返すようにする

rawMarkup: function() {
  var md = new Remarkable();
  return {
    __html: md.render(this.props.children)
  };
},

render: function() {
  return (
    <div className="comment">
      <h2 className="commentAuthor">
        {this.props.author}
      </h2>
      <span dangerouslySetInnerHTML={this.rawMarkup()}></span>
    </div>
  );
}