在React中，一個非常常用的模式就是將元件抽象封裝起來。這些元件將對外公開一些屬性（Props）來完成一些簡單的功能，然而其內部細節可能是比較複雜的。一般情況下，Props是不變的。其使用方式如下：

{this.props.key}

下面我們先用一段程式碼來看一下Props如何使用

var CommentBox = React.createClass({
        render:function(){
            return (
                <div className=”CommentBox”>
                    Hello,world! I am a {this.props.name}.
                </div>
            );
        }
    }
);
ReactDOM.render(
    <CommentBox name="Props" />,
    document.getElementById('content')
);

看到了嗎，其實Props使用就是這麼簡單。從上面的例子中我們可以知道，其實Props可以看做是在元件之間進行通訊的一種方式。當然，對於元件之間的通訊以後再向大家介紹。這裡我們只介紹傳遞Props——Transferring Props。

好，接著我們繼續看下面的程式碼

var Checkbox = React.createClass({
    render: function() {
        var  Cbox = this.props.checked ? 'Checked' : 'Unchecked';
        return (
            <div className={Cbox} >
                {this.props.children}
            </div>
        );
    }
});
ReactDOM.render(
    <Checkbox checked={true}>
        Hello world!
    </Checkbox >,
    document.getElementById('content')
);

這段程式碼沒有問題。但是，如果我想在div標籤上面加上屬性title、name、onClick等，是不是我要每一條都要寫到元件裡

<div className={fancyClass} onClick={this.props.onClick} name={this.props.name} title={this.props.title}>
    {this.props.children}
</div>

這樣做顯然是很囉嗦的，也是不安全的。這時我們可以通過JSX的特性 … 來解決這一問題。它的功能是將未知屬性提取出來。

其用法就是，列出當前要使用的屬性，後面再跟上 …other 

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

這樣就能確保除了那些明確使用的屬性，其他的所有props都能傳下去了。此時的…other中儲存的是除了checked屬性以外的所有屬性。對於上面的例子我們可以改寫成如下形式

var Checkbox = React.createClass({
    render: function() {
         var {checked , ...other} = this.props;
        var  Cbox = checked ? 'Checked' : 'Unchecked';
        return (
            <div className={Cbox} {...other} />
        );
    }
});
ReactDOM.render(
    <Checkbox checked={true} title="跡憶部落格" name="onmpw">
        Hello world!
    </Checkbox >,
    document.getElementById('content')
);

在這個例子中，…other 中的屬性為title、name和children，沒有checked。

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

這樣，在 ...other 中的屬性為name和children，就也不包含title了。

下面我們介紹一個和…other 類似的知識點，就是 …this.props。看下面的例子：

var Checkbox = React.createClass({
    render: function() {
        var  Cbox = this.props.checked ? 'Checked' : 'Unchecked';
        return (
            <div className={Cbox} {...this.props} />
        );
    }
});

其實，這裡…this.props和…other功能差不多。但是，其不同的地方在於，…other是包含除了明確使用的屬性以外剩下的那些屬性。而…this.props包含所有的屬性，不論你是否是明確使用的。也就是說，在上面的額例子中，checked屬性也會被傳到元件裡面去。

如果一個屬相被使用了，但是還想接著往下傳那應該怎麼辦。我們通過上面的講解知道，如果使用…other方式的話，屬性被使用了就無法再往下傳了。所以說如果想要往下繼續傳遞的話，可以使用checked={checked}這種方式再次重傳。

看下面的例子

var Checkbox  = React.createClass({
    handleChange:function(){
        console.log('跡憶部落格');
    },
    render: function() {
        var { checked, title, ...other } = this.props;
        var Cbox = checked ? 'FancyChecked' : 'FancyUnchecked';
        var boxTitle = checked ? 'Y ' + title : 'N ' + title;
        return (
            <label>
                <input {...other}
                    checked={checked}
                    className={Cbox}
                    type="checkbox"
                    onChange={this.handleChange}
                 />
                {boxTitle}
            </label>
        );
    }
});
ReactDOM.render(
    <Checkbox  checked={true} name="onmpw" title="跡憶部落格" />,
    document.getElementById('content')
);

這裡我們要注意屬性的順序。我們把input中{…other}放在JSX Props的前面是保證JSX的Props不被覆蓋。在上面的例子中我們就可以保證input的型別就是checkbox。

比方說吧，如果我們input中的Props的順序是下面這樣的

<input
    type="checkbox"
    {...other}
    checked={checked}
    className={Cbox}
    onChange={this.handleChange}
    />

而我們又在使用render渲染的時候指定了input的type屬性為text

<Checkbox type="text" checked={true} name="onmpw" title="跡憶部落格" />

那最後得到的就不是checkbox了，而是一個輸入框。因為input的type=”checkbox”屬性被…other中的type屬性覆蓋掉了。

好了，說到這相信大家對React的Props概念和Props的傳遞有一個比較清晰的認識了。希望本文對大家學習React有一定的幫助。