在页面上以编程方式插入 React “root” dom答案

【问题标题】：Insert React "root" dom to be programatically on the page在页面上以编程方式插入 React “root” dom
【发布时间】：2018-10-01 05:05:14
【问题描述】：

假设我的 HTML 文件中有一个地方：

<div id="root"></div>

要将 React 元素渲染到该 DOM 节点，我将其传递给 ReactDOM.render()：

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

但是，如果该节点是通过编程方式创建的，那么在用户登录之后会出现延迟渲染它的情况。为了说明，我正在尝试做类似的事情：

<script type="text/javascript">
        setTimeout(function(){
            document.body.innerHTML += '<div id="root" data-user="1"></div>'
        }, 3000)
    </script>

这不起作用。 ReactDOM 在查找 document.getElementById('root') 时在第一遍没有找到任何东西，因此它什么也不渲染。有没有办法动态地做到这一点？

【问题讨论】：

你有没有考虑在渲染完 DOM 后加载 JS 文件？在页面末尾添加JS？
为了说明，我正在尝试做类似的事情 - 这应该在 React 应用程序中完成，所以你可以完全控制优先级。

标签： javascript reactjs react-props react-dom

【解决方案1】：

试试这个：

<html>
<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
</head>
<body id="body">
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script type="text/babel">
		document.getElementById("body").innerHTML = `
		     <div id="app"></div>
		`; 

		const name = 'Josh Perez'; 
		const element = <h1>Hello, {name}</h1>; 
		ReactDOM.render( element, document.getElementById('app') );
	</script>
</body>
</html>

【讨论】：