<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='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.....
webpack打包后的文件你访问不到里面的组件名了
你可以用全局变量，将组件名放到window 上
你下面的例子，用的挺好的啊，可以简化下，判断ad.name将data放到一个变量里，统一传入data这个prop就简单点