代码之家 › 专栏 › 技术社区 › Susmit Agrawal Sudip Bolakhe

在多个<script>标记之间分发代码

reactjs javascript

Susmit Agrawal Sudip Bolakhe · 技术社区 · 7 年前

假设在我的HTML文件中,在 <body> 标签:

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

<script type="text/babel">
    class Element extends React.Component {...}

    ReactDOM.render(<Element />, document.getElementById("root");
</script>

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

<script type="text/babel">
    class Element extends React.Component {...}

</script>

<script type="text/babel">
    ReactDOM.render(<Element />, document.getElementById("root");
</script>

我只看到一个空白屏幕。

如果 ReactDOM.render()

2 回复 | 直到 7 年前

Bhojendra Rauniyar 7 年前

因为你的脚本是 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>

You Nguyen 7 年前

很好用

<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

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

9 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

10 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

10 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

10 月前

Luckkks · 过渡色工作不正常

10 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

10 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

10 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

10 月前

noblerare · Vite错误-未定义导出(SSR)

10 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

10 月前