資訊專(zhuān)欄INFORMATION COLUMN
摘要：于是考慮通過(guò)直接對(duì)進(jìn)行修改屬性的方法來(lái)達(dá)到我們的目的，修改組件。運(yùn)行后驚呆了，報(bào)錯(cuò)了意思是說(shuō)屬性是不能擴(kuò)展的，即不能修改。于是，嘗試修改代碼如下運(yùn)行之后，成了當(dāng)然擴(kuò)展的話可以根據(jù)判斷或者其他要求來(lái)相應(yīng)的修改屬性，此處統(tǒng)一將所有的變?yōu)榧t色。
React入門(mén)，大神輕噴哈^_^
下面的代碼是建立在React 0.14.*版本的
今天在嘗試封裝React component的時(shí)候碰到了幾個(gè)問(wèn)題，猜小白們學(xué)習(xí)React中可能會(huì)碰到，我就整理下希望能幫助到小白們。
Keyword: props children cloneElement
React父子組件交流一般是用props傳遞，比如：
const T = React.createClass({
render() {
return { this.props.text }
}
});
const B = React.createClass({
render() {
return (
)
}
});
ReactDOM.render( , document.querySelector("#container"));
運(yùn)行后自然是輸出下面兩行啦
level A
level B
上面栗子中有兩個(gè)子組件包含在
這時(shí)候就需要利用this.props的一個(gè)重要屬性了：children。
const C = React.createClass({
render() {
return (
lever C
lever D
)
}
});
const D = React.createClass({
render() {
return(
{ this.props.children }
)
}
});
ReactDOM.render(
這里this.props.children會(huì)獲得傳入的兩個(gè)React element
重要的問(wèn)題來(lái)了，那如何控制傳入的elements咧？總不能你給我什么就呈現(xiàn)什么吧，比如上面的栗子中我就想把傳入的元素統(tǒng)統(tǒng)變成紅色字體，怎么做？
給外層div加個(gè)ref，如 X , 然后利用this.refs.X.style.color = "#f00"。這種做法只能勉強(qiáng)滿足當(dāng)前做法，很不靈活，一旦要修改的樣式子級(jí)無(wú)法繼承就沒(méi)用了，所以不可取。
給外層div加個(gè)className如 cl ，接著在樣式文件中寫(xiě)明.cl h1 的樣式。這種做法比上一種方案好一點(diǎn)，但是缺點(diǎn)是只能應(yīng)付樣式，并且需要在已知children的標(biāo)簽類(lèi)型才行。但假設(shè)需求就是給children的所有的文本類(lèi)標(biāo)簽添加紅色樣式，但不說(shuō)明用的是
是否可以直接遍歷this.props.children進(jìn)而修改屬性呢？
舉上面栗子，輸出的this.props.children，展開(kāi)后會(huì)發(fā)現(xiàn)：組件在React中是以一個(gè)對(duì)象的形式存在，包含了type, ref 和 Key 屬性，還有最重要的props屬性。
props包含了除前邊三個(gè)之外的寫(xiě)在組件上的其他屬性，包括默認(rèn)屬性src / alt這些，還有自定義的如這里的wen屬性。
！這里注意的是props中不包含{ref，key},下面會(huì)提及到。
于是考慮通過(guò)直接對(duì)props進(jìn)行修改屬性的方法來(lái)達(dá)到我們的目的，修改D組件。
const D = React.createClass({
render() {
let children = this.props.children.map( (o, i)=>{
o.props.style = { color: "#f00" };
return o;
});
return (
{ children }
)
}
});
運(yùn)行后驚呆了，報(bào)錯(cuò)了：
Uncaught TypeError: Can"t add property style, object is not extensible
意思是說(shuō)props屬性是不能擴(kuò)展的，即不能修改。
后面繼續(xù)嘗試給o增刪屬性都是會(huì)報(bào)錯(cuò)，說(shuō)明這里遍歷的每個(gè)對(duì)象o都是read only的。
醉了。。。這還怎么達(dá)到我們的目的咧？
于是乎繼續(xù)回頭翻閱React官方文檔，瞄到了React.cloneElement，突然意識(shí)到了什么，沒(méi)錯(cuò)，正面太鋒芒，我們繞開(kāi)它，直接修改對(duì)象不行，我們就拷貝一個(gè)自己用。
ReactElement cloneElement( ReactElement element, [object props], [children ...] )
這里的element是我們要拷貝的原對(duì)象，在這里是o。
props可選，當(dāng)傳入個(gè)對(duì)象的時(shí)候是會(huì)和原對(duì)象的props進(jìn)行合并，合并的方式是無(wú)則添加，有則覆蓋。
children就是前邊提到的props.children,用來(lái)加入子組件的，也是可選，這個(gè)栗子中暫時(shí)用不到。
于是，嘗試修改代碼如下：
const D = React.createClass({
render() {
let children = this.props.children.map( (o, i)=>{
return React.cloneElement(o, { style: {color:"#f00"} })
});
return (
{ children }
)
}
});
運(yùn)行之后，成了！！！
當(dāng)然擴(kuò)展的話可以根據(jù)判斷o.type或者其他要求來(lái)相應(yīng)的修改屬性，此處統(tǒng)一將所有的
不過(guò)到這里還沒(méi)結(jié)束，雖然效果有了，但是在console中還是出現(xiàn)了警告：
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of D. It was passed a child from C.
這個(gè)好理解，就是在遍歷數(shù)組的時(shí)候需要給每個(gè)元素添加Key屬性。不過(guò)問(wèn)題來(lái)了，前邊說(shuō)，key不算是Props的一員，即不能通過(guò)o.props.key=...來(lái)添加key?？碦eact.cloneElement的參數(shù)列表中只有element, props和children，我又醉了，這次文檔也沒(méi)幫到什么了。
于是乎，看看源碼cloneElement的源碼，不看不知道，一看想給文檔一巴掌，誤導(dǎo)我了！
是不是恍然大悟了？沒(méi)錯(cuò)，雖然參數(shù)名是叫Props，不過(guò)實(shí)際上React是把ref/key這些屬性也當(dāng)成Porps的一部分（報(bào)錯(cuò)的信息里邊也確實(shí)說(shuō)"key" prop），只是在保存的時(shí)候會(huì)多帶帶拿出來(lái)，為了和其他屬性區(qū)分開(kāi)。
在clone的過(guò)程中，對(duì)props的遍歷會(huì)先多帶帶把ref和key拿出來(lái)判斷，并且不會(huì)保存在新的Props中，也就在輸出的時(shí)候看到的是分離的。
不過(guò)，既然clone的時(shí)候props參數(shù)包含著Key,那就容易了，修改一行代碼如下。
const D = React.createClass({
render() {
console.log(React.cloneElement);
// 這里需要注意如果this.props.children只有一個(gè)元素，那將不是一個(gè)數(shù)組，
// 所以還是需要提前判斷類(lèi)型，用Array.isArray(this.props.children)
let children = this.props.children.map( (o, i)=>{
return React.cloneElement(o, { style: {color:"#f00"}, key: i })
});
return (
{ children }
)
}
});
完成?。。?/p>
另外，React還提供了關(guān)于React.children的幾個(gè)有用的頂層API，也很有用，這里就不說(shuō)了，具體的參考官方文檔哈。
https://facebook.github.io/react/docs/top-level-api.html#react.children
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/78603.html
摘要：倘若在之后修改對(duì)象屬性，會(huì)有兩種結(jié)果若在非下，不會(huì)報(bào)錯(cuò)，但是任何修改都是不起作用的?？偨Y(jié)開(kāi)發(fā)過(guò)程中還是用非壓縮版的好，有利于及時(shí)發(fā)現(xiàn)問(wèn)題。 在 React - 修改children(上) 中我提到了React在遍歷children過(guò)程中是不允許修改其中的React Element的，這里我要做點(diǎn)補(bǔ)充，就是有個(gè)前提是：使用的React是非壓縮版的，也就是說(shuō)不是使用react.min.js...
摘要：使用者需要做的，就是完成回調(diào)函數(shù)里的邏輯即可，十分簡(jiǎn)單。如果你需要異步生成，你需要設(shè)置參數(shù)為元素展現(xiàn)時(shí)的回調(diào)函數(shù)，接收和作為參數(shù)。多次展現(xiàn)時(shí)，是否每次都觸發(fā)回調(diào)函數(shù)組件里監(jiān)聽(tīng)滑動(dòng)事件時(shí)，用了。 showImg(https://segmentfault.com/img/bVbloJf?w=620&h=480); 寫(xiě)在前面 在這個(gè)數(shù)據(jù)無(wú)比重要的時(shí)代，用戶在網(wǎng)頁(yè)上面的一系列操作，都需要用數(shù)據(jù)...
摘要：每當(dāng)?shù)闹蹈淖兒螅覀冎恍枰匦抡{(diào)用方法即可現(xiàn)在，讓我們來(lái)實(shí)現(xiàn)一個(gè)類(lèi)似風(fēng)格的歸約函數(shù)，以不斷的遞增。歸約函數(shù)是不允許修改當(dāng)前狀態(tài)的，所有最簡(jiǎn)單的實(shí)現(xiàn)方式就是。 原文：Functional Components with React stateless functions and Ramda 閱讀本文需要的知識(shí)儲(chǔ)備： 函數(shù)式編程基本概念（組合、柯里化、透鏡） React 基本知識(shí)（組件、...
摘要：組件有兩個(gè)關(guān)鍵的表明當(dāng)前是否應(yīng)高亮，自己被點(diǎn)擊時(shí)調(diào)用的回調(diào)函數(shù)，由于是每個(gè)頁(yè)面的容器，它只負(fù)責(zé)把渲染出來(lái)，所以用函數(shù)式組件即可。 這種模式本質(zhì)上解決的是組件之間傳值的問(wèn)題。但是它對(duì)于傳值以及一些內(nèi)部操控的邏輯封裝得更嚴(yán)密。 場(chǎng)景：希望減少上下級(jí)組件之間props的傳遞，簡(jiǎn)單來(lái)說(shuō)就是不用傳做顯式地傳值，來(lái)達(dá)到組件之間相互通信的目的 舉例來(lái)說(shuō)，某些界面中應(yīng)該有Tabs這樣的組件，由Tab和...
摘要：近兩年來(lái)一直在關(guān)注開(kāi)發(fā)，最近也開(kāi)始全面應(yīng)用。首先，我們從無(wú)狀態(tài)組件開(kāi)始。渲染回調(diào)模式有一種重用組件邏輯的設(shè)計(jì)方式是把組件的寫(xiě)成渲染回調(diào)函數(shù)或者暴露一個(gè)函數(shù)屬性出來(lái)。最后，我們將這個(gè)回調(diào)函數(shù)的參數(shù)聲明為一個(gè)獨(dú)立的類(lèi)型。 近兩年來(lái)一直在關(guān)注 React 開(kāi)發(fā)，最近也開(kāi)始全面應(yīng)用 TypeScript 。國(guó)內(nèi)有很多講解 React 和 TypeScript 的教程，但如何將 TypeScri...
閱讀 3364·2021-11-11 16:54
閱讀 3523·2021-10-11 10:58
閱讀 1262·2021-08-30 09:41
閱讀 1808·2019-08-30 15:54
閱讀 2032·2019-08-30 14:00
閱讀 2706·2019-08-29 17:13
閱讀 1673·2019-08-29 15:19
閱讀 613·2019-08-29 15:14
