<head>
<script src="../../js/lib/react.min.js"></script>
<script src="../../js/lib/react-dom.min.js"></script>
</head>
<body>
<p id="app2">插件加載錯(cuò)誤</p>
</body>
<script src="../../js/dis/toDoList01.bundle.js"></script>
//▲看上面,這里有一個(gè)我寫(xiě)好的組件▲。
//▼看下面,這里有一個(gè)插入方法▼
//下面代碼原來(lái)在上邊這文件里,剪切出來(lái)就不能正常插入到頁(yè)面了
//這樣做是因?yàn)槲以噲D在不同的頁(yè)面底部的`script`標(biāo)簽中插入組件
//以方便在不同的頁(yè)面給組件傳入不同的`props`值1
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
<script type="text/javascript">
ReactDOM.render(
React.createElement(ToDoList, null),
document.getElementById('app2')
);
</script>
●背景交代完畢:插入組件失敗了,我考慮可能是ReactDOM.render
這段代碼被打在包里能用,脫離包就不能用了,也理所當(dāng)然。(懷疑我的組件名都屬于這個(gè)包里的局部變量的原因)
●疑問(wèn)是:其于以上的失敗,那么如何將同一個(gè)組件的不用顯示形態(tài)插入到不同頁(yè)面中?
●詳述一下:我寫(xiě)了一個(gè)側(cè)邊廣告。這個(gè)廣告接收到不同的props
來(lái)顯示不同的廣告內(nèi)容。
然后插入到不同頁(yè)面的<p id='Ad'></p>
中。即
A 頁(yè)面 <AdComponent data='AdData01'/>
B 頁(yè)面 <AdComponent data='AdData02'/>
C 頁(yè)面 <AdComponent data='AdData03'/>
如果不能分別寫(xiě)在每個(gè)頁(yè)面底部的script
中那么,就只能在外部的.js文件中插入組件。
我現(xiàn)在這樣做的:判斷同一個(gè)容器的name
值,不同的name
值插入不同的props
數(shù)據(jù)。代碼如下
請(qǐng)問(wèn)有什么更好的辦法嗎?
謝謝您的瀏覽、和解答,謝謝你。老司機(jī)一生平安。謝謝!
var ad = document.getElementById('Ad');
if(ad.name=="apple"){
ReactDOM.render(
<AdComponent data='AdData01'/>,
document.getElementById('Ad'),
)
}else if(ad.name=="banana"){
ReactDOM.render(
<AdComponent data='AdData02'/>,
document.getElementById('Ad'),
)
}else if.....
webpack打包后的文件你訪問(wèn)不到里面的組件名了
你可以用全局變量,將組件名放到window 上
你下面的例子,用的挺好的啊,可以簡(jiǎn)化下,判斷ad.name將data放到一個(gè)變量里,統(tǒng)一傳入data這個(gè)prop就簡(jiǎn)單點(diǎn)