本文小編為大家詳細(xì)介紹“React中怎么傳遞Props”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“React中怎么傳遞Props”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。
站在用戶的角度思考問題，與客戶深入溝通，找到羅甸網(wǎng)站設(shè)計與羅甸網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站設(shè)計、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋羅甸地區(qū)。
在React中，一個非常常用的模式就是將組件抽象封裝起來。這些組件將對外公開一些屬性（Props）來完成一些簡單的功能，然而其內(nèi)部細(xì)節(jié)可能是比較復(fù)雜的。一般情況下，Props是不變的。其使用方式如下：
{this.props.key}
下面我們先用一段代碼來看一下Props如何使用
var CommentBox = React.createClass({
render:function(){
return (
看到了嗎，其實Props使用就是這么簡單。從上面的例子中我們可以知道，其實Props可以看做是在組件之間進(jìn)行通信的一種方式。當(dāng)然，對于組件之間的通信以后再向大家介紹。這里我們只介紹傳遞Props——Transferring Props。
好，接著我們繼續(xù)看下面的代碼
var Checkbox = React.createClass({
render: function() {
var Cbox = this.props.checked ? 'Checked' : 'Unchecked';
return (
這段代碼沒有問題。但是，如果我想在div標(biāo)簽上面加上屬性title、name、onClick等，是不是我要每一條都要寫到組件里
這樣做顯然是很啰嗦的，也是不安全的。這時我們可以通過JSX的特性 … 來解決這一問題。它的功能是將未知屬性提取出來。
其用法就是，列出當(dāng)前要使用的屬性，后面再跟上 …other （注意：…后面跟的字符串不是固定的other，也可以是其它的，例如：onmpw）。
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 (
在這個例子中，…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 (
其實，這里…this.props和…other功能差不多。但是，其不同的地方在于，…other是包含除了明確使用的屬性以外剩下的那些屬性。而…this.props包含所有的屬性，不論你是否是明確使用的。也就是說，在上面的額例子中，checked屬性也會被傳到組件里面去。
如果一個屬相被使用了，但是還想接著往下傳那應(yīng)該怎么辦。我們通過上面的講解知道，如果使用…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 (
);
}
});
ReactDOM.render(
document.getElementById('content')
);
這里我們要注意屬性的順序。我們把input中{…other}放在JSX Props的前面是保證JSX的Props不被覆蓋。在上面的例子中我們就可以保證input的類型就是checkbox。
比方說吧，如果我們input中的Props的順序是下面這樣的
{...other}
checked={checked}
className={Cbox}
onChange={this.handleChange}
/>
而我們又在使用render渲染的時候指定了input的type屬性為text
那最后得到的就不是checkbox了，而是一個輸入框。因為input的type=”checkbox”屬性被…other中的type屬性覆蓋掉了。
讀到這里，這篇“React中怎么傳遞Props”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
