javascript - React 的新手問題，如何在不同頁面靈活插入react元件？

<head>
    <script src="../../js/lib/react.min.js"></script>
    <script src="../../js/lib/react-dom.min.js"></script>
</head>

<body>
    <p id="app2">插件加载错误</p>
</body>

<script src="../../js/dis/toDoList01.bundle.js"></script>
//▲看上面，这里有一个我写好的组件▲。
//▼看下面，这里有一个插入方法▼
//下面代码原来在上边这文件里，剪切出来就不能正常插入到页面了
//这样做是因为我试图在不同的页面底部的`script`标签中插入组件
//以方便在不同的页面给组件传入不同的`props`值1
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
<script type="text/javascript">
    ReactDOM.render(
        React.createElement(ToDoList, null), 
        document.getElementById('app2')
    );
</script>

●背景交代完畢：插入元件失敗了，我考慮可能是ReactDOM.render這段程式碼被打在包裡能用，脫離包就不能用了，也理所當然。（懷疑我的元件名稱都屬於這個包裡的局部變數的原因）
●疑問是：其於以上的失敗，那麼如何將同一個元件的不用顯示形態插入到不同頁面中？
●詳述一下：我寫了一個側邊廣告。這個廣告接收到不同的props來顯示不同的廣告內容。
然後插入到不同頁面的<p id='Ad'></p>中。即
A 頁面<AdComponent data='AdData01'/> B 頁面<AdComponent data='AdData02'/> C 頁<AdComponent data='AdData02'/> C 網頁<AdComponent data=' AdData03'/>
如果不能分別寫在每個頁面底部的script
中那麼，就只能在外部的.js檔案中插入元件。 我現在這樣做的:判斷同一個容器的name值，不同的name值插入不同的props
資料。程式碼如下請問有什麼更好的辦法嗎？

謝謝您的瀏覽、和解答，謝謝你。老司機一生平安。謝謝！

####

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.....

曾经蜡笔没有小新2750 天前458

javascript - React 的新手問題，如何在不同頁面靈活插入react元件？

全部回覆(1)我來回復