为了账号安全,请及时绑定邮箱和手机立即绑定

使用标题标签渲染文本

使用标题标签渲染文本

呼啦一阵风 2024-01-22 16:55:33
我是 React 新手,我遇到了一个令人困惑的情况。我正在尝试使用 ReactDOM 渲染 H1 标签,但标头的结束标签不断变成字符串。这是我的代码<!DOCTYPE html><html><head>    <title> React Project</title>    <script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>    <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script></head><body>    <div id="root"></div>    <script type="text/javascript">        ReactDOM.render(        <h1>Hello World</h1>,           document.getElementById("root")        );    </script></body></html>SublimeText 上的代码如下所示:在此输入图像描述错误是 [Uncaught SyntaxError: 意外的标记 '<']我尝试按照React官方网站的建议使用 Constant,ReactDOM.render(                 const element = <h1>Hello, world</h1>;                document.getElementById("root")                );但结果是一样的。那么这种情况我该怎么办呢?
查看完整描述

2 回答

?
杨魅力

TA贡献1811条经验 获得超6个赞

您还需要使用 JS 预处理器来理解 JSX 格式,例如 Babel


<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>

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

<script type="text/babel">

  ReactDOM.render( 

    <h1> Hello World </h1>,   

    document.getElementById("root")

  );

</script>


查看完整回答
反对 回复 2024-01-22
?
守候你守候我

TA贡献1802条经验 获得超10个赞

你的<script>标签告诉浏览器它是,Javascript但实际上它是 JSX。您需要使用 Babel 之类的东西来转译 JSX。

<!DOCTYPE html>

<html>

<head>

  <title> React Project</title>

  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>

  <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>

</head>

<body>

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

  <script type="text/babel">

    ReactDOM.render(

      <h1>Hello World</h1>,   

      document.getElementById("root")

    );

  </script>

</body>

</html>



查看完整回答
反对 回复 2024-01-22
  • 2 回答
  • 0 关注
  • 93 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信