Question

假设我的HTML文件中的标记内包含以下代码：

上面的代码可以完美地工作。但是，如果我将其更改为以下内容：

我只是看到一个空白屏幕。

如果 ReactDOM.render（）调用是通过单独的标签进行的，为什么React无法正常工作？

Answer 1

因为您的脚本的类型为text/babel，这意味着它们将转换为JavaScript并在不同的范围内进行评估。您可以将类存储在全局变量中，然后检索它以在不同的范围内使用它，如下所示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

<script type="text/babel">
  class Element extends React.Component {
    render() {
      return (
        <h1>Hello, world!</h1>
      );
    }
  }
  
  window['Element'] = Element;
</script>

<script type="text/babel">
  var Element = window['Element']; 
  ReactDOM.render(
    <Element />, 
    document.getElementById("root")
  );
</script>

Answer 2

效果很好

<html>

<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
</head>
<body>
	<div id="root"></div>
	<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">
		 class Element extends React.Component {
			 render(){
				 return (
					 <div>Hello</div>
				 )
			 }
		 }
	</script>
	
	<script type="text/babel">
		ReactDOM.render( <Element/>, document.getElementById('root') );
	</script>
</body>
</html>

这是CodeSandbox上的另一个演示：https://codesandbox.io/s/92qv025204

在多个<script>标签之间分配代码

2 个答案: