<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>●Penjelasan latar belakang selesai: Memasukkan komponen gagal, saya fikir ia mungkin ReactDOM.render这段代码被打在包里能用，脱离包就不能用了，也理所当然。（怀疑我的组件名都属于这个包里的局部变量的原因）
●疑问是：其于以上的失败，那么如何将同一个组件的不用显示形态插入到不同页面中？
●详述一下：我写了一个侧边广告。这个广告接收到不同的props来显示不同的广告内容。
然后插入到不同页面的<p id='Ad'></p>中。即
A 页面 <AdComponent data='AdData01'/>
B 页面 <AdComponent data='AdData02'/>
C 页面 <AdComponent data='AdData03'/>
如果不能分别写在每个页面底部的script中那么，就只能在外部的.js文件中插入组件。
我现在这样做的:判断同一个容器的name值，不同的name值插入不同的propsdata. Kodnya adalah seperti berikut
Adakah cara yang lebih baik?
Terima kasih kerana menyemak imbas dan jawapan anda, terima kasih. Pemandu tua mempunyai kehidupan yang selamat. Terima kasih!
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.....
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda tidak boleh mengakses nama komponen dalam fail yang dibungkus oleh webpack
Anda boleh menggunakan pembolehubah global untuk meletakkan nama komponen pada tetingkap
Contoh anda di bawah sangat bagus. Ia boleh dipermudahkan untuk menilai ad.name dan memasukkan data ke dalam pembolehubah dengan cara yang bersatu