over 3 years ago

以下是survey官網的tutorial後整理的心得,是有關於this.props以及如何透過props存取parent傳入的data

1. pros and component properties

先想一個問題,child node要如何得到parent node的data

例如CommentList包含Comment,那麼Comment要如何得到CommentList的data?

var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        <Comment author="Pete Hunt">Good!</Comment>
      </div>
    );
  }
});

可以看到在CommentList中,我們替Comment這個element建立了author的attribute與Good!這個comment text,那麼我們如何在Comment中獲得這兩個data?

這時我們就需要透過this.props來進行存取

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          //透過this.props.author來得到 author="Pete Hunt" 的 "Pete Hunt"

          {this.props.author}
        </h2>
           //透過this.props.children來得到 comment text "Good!"

          {this.props.children}
      </div>
    );
  }
});

2. Hook the data

先再看一次 CommentList

var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        <Comment author="Pete Hunt">Good!</Comment>
      </div>
    );
  }
});

如果我們想要動態載入 <Comment author="Pete Hunt">Good!</Comment> ,比如說從server將資料fetch下來後再render,而不是一開始就在code刻死,該怎麼做?

我們先假設我們從server fetch下來的data如下

var data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
];

然後把握一個原則,data會由parent往child傳,所以我們要先從最上面的parent往下丟

假設整個structure為CommentBox -> CommentList -> Comment

Step 1: 將data傳進去CommentBox

React.render(
  <CommentBox data={data} />,
  document.getElementById('content')
);

Step2: 現在data已經進入CommentBox了,我們要在CommentBox中透過props來接它

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        //利用this.props.data來接

        <CommentList data={this.props.data} />
        <CommentForm />
      </div>
    );
  }
});

Step3: 很好,我們繼續往下一層的CommentList傳,並且把它render出來。這邊可能會有點複雜

var CommentList = React.createClass({
  render: function() {
    //透過this.props.data.map來將data的內容一個一個讀出來

    var commentNodes = this.props.data.map(function (comment) {
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

我們看一下為何要this.props.data.map?

如果還有印象,我們所假設的data有兩筆,而透過map可以一筆一筆讀出來,可以想成for-each

所以,我們就可以透過

 var commentNodes = this.props.data.map(function (comment) {
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });

來將data傳給最內部的Comment了! 最後再把它render出來即可

謹記在心,props 是從parent傳進來的,而且為immutable

← Javascript DeviceMotion & DeviceOrientation API Javascript 閉包 Closure →
 
comments powered by Disqus