<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>●Background explanation completed: Inserting the component failed. I thought it might be that ReactDOM.render This code can be used if it is included in the package, but it cannot be used if it is separated from the package, which is natural. (The reason why I suspect that all my component names belong to local variables in this package)
●The question is: Since the above failed, how can I insert the non-displayed form of the same component into different pages?
●To elaborate: I wrote a side advertisement. This ad receives different props to display different ad content.
Then insert it into <p id='Ad'></p> on different pages. That is,
A page<AdComponent data='AdData01'/>
B page<AdComponent data='AdData02'/>
C page<AdComponent data=' AdData03'/>
If it cannot be written in the script at the bottom of each page, then the component can only be inserted in an external .js file.
What I do now: determine the name value of the same container, and insert different props data for different name values. The code is as follows
Is there any better way?
Thank you for your browsing and answers, thank you. The old driver has a safe life. Thanks!
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] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can’t access the component names in the files packaged by webpack
You can use global variables to put the component name on the window
Your example below is very good. It can be simplified. It is easier to judge ad.name and put the data into a variable. Then pass in the data prop in a unified manner