傳遞 Props

React 里有一個非常常用的模式就是對組件做一層抽象。組件對外公開一個簡單的屬性（Props）來實現(xiàn)功能，但內(nèi)部細節(jié)可能有非常復(fù)雜的實現(xiàn)。

可以使用 JSX 展開屬性 來合并現(xiàn)有的 props 和其它值：

return <Component {...this.props} more="values" />;

如果不使用 JSX，可以使用一些對象輔助方法如 ES6 的 Object.assign 或 Underscore _.extend。

return Component(Object.assign({}, this.props, { more: 'values' }));

下面的教程介紹一些最佳實踐。使用了 JSX 和 ES7 的還在試驗階段的特性。

手動傳遞

大部分情況下你應(yīng)該顯式地向下傳遞 props。這樣可以確保只公開你認為是安全的內(nèi)部 API 的子集。

var FancyCheckbox = React.createClass({  render: function() {    var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';    return (
      <div className={fancyClass} onClick={this.props.onClick}>
        {this.props.children}
      </div>
    );
  }
});
React.render(
  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
    Hello world!
  </FancyCheckbox>,  document.getElementById('example')
);

但 name 這個屬性怎么辦？還有 title、onMouseOver 這些 props？

在 JSX 里使用 ... 傳遞

有時把所有屬性都傳下去是不安全或啰嗦的。這時可以使用解構(gòu)賦值中的剩余屬性特性來把未知屬性批量提取出來。

列出所有要當(dāng)前使用的屬性，后面跟著 ...other。

var { checked, ...other } = this.props;

這樣能確保把所有 props 傳下去，除了 那些已經(jīng)被使用了的。

var FancyCheckbox = React.createClass({  render: function() {    var { checked, ...other } = this.props;    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';    // `other` 包含 { onClick: console.log } 但 checked 屬性除外    return (
      <div {...other} className={fancyClass} />
    );
  }
});
React.render(
  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
    Hello world!
  </FancyCheckbox>,  document.getElementById('example')
);

注意:

上面例子中，checked 屬性也是一個有效的 DOM 屬性。如果你沒有使用解構(gòu)賦值，那么可能無意中把它傳下去。

在傳遞這些未知的 other 屬性時，要經(jīng)常使用解構(gòu)賦值模式。

var FancyCheckbox = React.createClass({
  render: function() {    var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';    // 反模式：`checked` 會被傳到里面的組件里
    return (      <div {...this.props} className={fancyClass} />
    );
  }
});

使用和傳遞同一個 Prop

如果組件需要使用一個屬性又要往下傳遞，可以直接使用 checked={checked} 再傳一次。這樣做比傳整個 this.props 對象要好，因為更利于重構(gòu)和語法檢查。

var FancyCheckbox = React.createClass({
  render: function() {    var { checked, title, ...other } = this.props;    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';    var fancyTitle = checked ? 'X ' + title : 'O ' + title;    return (
      <label>
        <input {...other}          checked={checked}
          className={fancyClass}
          type="checkbox"
        />
        {fancyTitle}
      </label>
    );
  }
});

注意:

順序很重要，把 {...other} 放到 JSX props 前面會使它不被覆蓋。上面例子中我們可以保證 input 的 type 是 "checkbox"。

剩余屬性和展開屬性 ...

剩余屬性可以把對象剩下的屬性提取到一個新的對象。會把所有在解構(gòu)賦值中列出的屬性剔除。

這是 ES7 草案 中的試驗特性。

var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1y; // 2z; // { a: 3, b: 4 }

注意:

使用 JSX 命令行工具 配合 --harmony 標(biāo)記來啟用 ES7 語法。

使用 Underscore 來傳遞

如果不使用 JSX，可以使用一些庫來實現(xiàn)相同效果。Underscore 提供 _.omit 來過濾屬性，_.extend 復(fù)制屬性到新的對象。

var FancyCheckbox = React.createClass({
  render: function() {    var checked = this.props.checked;    var other = _.omit(this.props, 'checked');    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';    return (
      React.DOM.div(_.extend({}, other, { className: fancyClass }))
    );
  }
});