React 的新手问题，如何在不同页面灵活插入react组件？

Question

●背景交代完毕：插入组件失败了，我考虑可能是ReactDOM.render这段代码被打在包里能用，脱离包就不能用了，也理所当然。（怀疑我的组件名都属于这个包里的局部变量的原因）
●疑问是：其于以上的失败，那么如何将同一个组件的不用显示形态插入到不同页面中？
●详述一下：我写了一个侧边广告。这个广告接收到不同的props来显示不同的广告内容。
然后插入到不同页面的<div id='Ad'></div>中。即

A 页面 <AdComponent data='AdData01'/>
B 页面 <AdComponent data='AdData02'/>
C 页面 <AdComponent data='AdData03'/>

如果不能分别写在每个页面底部的script中那么，就只能在外部的.js文件中插入组件。
我现在这样做的:判断同一个容器的name值，不同的name值插入不同的props数据。代码如下
请问有什么更好的办法吗？

谢谢您的浏览、和解答，谢谢你。老司机一生平安。谢谢！