Question

假设我的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')时，它在第一次通过时没有发现任何东西，因此它什么也不呈现。有没有办法动态地做到这一点？

Answer 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>

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

1 个答案: