<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>QuantityExplication de fond terminée : l'insertion du composant a échoué, j'ai pensé qu'il pourrait s'agir de ReactDOM.render这段代码被打在包里能用，脱离包就不能用了，也理所当然。（怀疑我的组件名都属于这个包里的局部变量的原因）
●疑问是：其于以上的失败，那么如何将同一个组件的不用显示形态插入到不同页面中？
●详述一下：我写了一个侧边广告。这个广告接收到不同的props来显示不同的广告内容。
然后插入到不同页面的<p id='Ad'></p>中。即
A 页面 <AdComponent data='AdData01'/>
B 页面 <AdComponent data='AdData02'/>
C 页面 <AdComponent data='AdData03'/>
如果不能分别写在每个页面底部的script中那么，就只能在外部的.js文件中插入组件。
我现在这样做的:判断同一个容器的name值，不同的name值插入不同的propsdata. Le code est le suivant
Y a-t-il un meilleur moyen ?
Merci pour votre navigation et vos réponses, merci. Le vieux conducteur a une vie sûre. Merci!
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] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous ne pouvez pas accéder aux noms des composants dans les fichiers packagés par webpack
Vous pouvez utiliser des variables globales pour mettre le nom du composant sur la fenêtre
Votre exemple ci-dessous est très utile. Il peut être simplifié. Il est plus facile de juger ad.name et de mettre les données dans une variable, puis de transmettre l'accessoire de données de manière unifiée.