React中怎么傳遞Props

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

在React中，一個非常常用的模式就是將組件抽象封裝起來。這些組件將對外公開一些屬性（Props）來完成一些簡單的功能，然而其內部細節可能是比較復雜的。一般情況下，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。

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

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。看下面的例子：

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屬性也會被傳到組件里面去。

如果一個屬相被使用了，但是還想接著往下傳那應該怎么辦。我們通過上面的講解知道，如果使用&hellip;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中{&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”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。