React中怎么傳遞Props

本文小編為大家詳細介紹“React中怎么傳遞Props”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“React中怎么傳遞Props”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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

{this.props.key}

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

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

看到了嗎，其實Props使用就是這么簡單。從上面的例子中我們可以知道，其實Props可以看做是在組件之間進行通信的一種方式。當然，對于組件之間的通信以后再向大家介紹。這里我們只介紹傳遞Props&mdash;&mdash;Transferring Props。

好，接著我們繼續(xù)看下面的代碼

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的特性 &hellip; 來解決這一問題。它的功能是將未知屬性提取出來。

其用法就是，列出當前要使用的屬性，后面再跟上 &hellip;other （注意：&hellip;后面跟的字符串不是固定的other，也可以是其它的，例如：onmpw）。

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

這樣就能確保除了那些明確使用的屬性，其他的所有props都能傳下去了。此時的&hellip;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')
);

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

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

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

下面我們介紹一個和&hellip;other 類似的知識點，就是 &hellip;this.props?？聪旅娴睦樱?/p>

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

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

如果一個屬相被使用了，但是還想接著往下傳那應(yīng)該怎么辦。我們通過上面的講解知道，如果使用&hellip;other方式的話，屬性被使用了就無法再往下傳了。所以說如果想要往下繼續(xù)傳遞的話，可以使用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中{&hellip;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=&rdquo;checkbox&rdquo;屬性被&hellip;other中的type屬性覆蓋掉了。

讀到這里，這篇“React中怎么傳遞Props”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。