国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - React 的新手問(wèn)題,如何在不同頁(yè)面靈活插入react組件?
曾經(jīng)蠟筆沒(méi)有小新
曾經(jīng)蠟筆沒(méi)有小新 2017-05-19 10:40:40
0
1
542
<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.....
曾經(jīng)蠟筆沒(méi)有小新
曾經(jīng)蠟筆沒(méi)有小新

全部回復(fù)(1)
曾經(jīng)蠟筆沒(méi)有小新

webpack打包后的文件你訪問(wèn)不到里面的組件名了

  1. 你可以用全局變量,將組件名放到window 上

  2. 你下面的例子,用的挺好的啊,可以簡(jiǎn)化下,判斷ad.name將data放到一個(gè)變量里,統(tǒng)一傳入data這個(gè)prop就簡(jiǎn)單點(diǎn)

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板