<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>●Hintergrunderklärung abgeschlossen: Das Einfügen der Komponente ist fehlgeschlagen. Ich dachte, es könnten ReactDOM.render这段代码被打在包里能用，脱离包就不能用了，也理所当然。（怀疑我的组件名都属于这个包里的局部变量的原因）
●疑问是：其于以上的失败，那么如何将同一个组件的不用显示形态插入到不同页面中？
●详述一下：我写了一个侧边广告。这个广告接收到不同的props来显示不同的广告内容。
然后插入到不同页面的<p id='Ad'></p>中。即
A 页面 <AdComponent data='AdData01'/>
B 页面 <AdComponent data='AdData02'/>
C 页面 <AdComponent data='AdData03'/>
如果不能分别写在每个页面底部的script中那么，就只能在外部的.js文件中插入组件。
我现在这样做的:判断同一个容器的name值，不同的name值插入不同的propsDaten sein. Der Code lautet wie folgt: Gibt es einen besseren Weg?
Vielen Dank für Ihr Stöbern und Ihre Antworten, vielen Dank. Der alte Fahrer hat ein sicheres Leben. Danke!
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-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
webpack打包后的文件你访问不到里面的组件名了
你可以用全局变量，将组件名放到window 上
你下面的例子，用的挺好的啊，可以简化下，判断ad.name将data放到一个变量里，统一传入data这个prop就简单点