时间戳

首页 > 解决方案 > ReactDOM 你好世界

reactjs - ReactDOM 你好世界

问题描述

在这个简单的 React 示例中挣扎了 3 个小时：C。“mainDiv”应该可以正常工作，但我在那里看不到 HELLO WORLD。这是代码：

<html>
<head>
    <title>REACT</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="mainDiv" class="divstyle"></div>
    <script type="text/babel">

        let A = <div className="HW">HELLO WORLD!</div>;
        let B = document.getElementById("mainDiv");
        reactDOM.render(A,B);

    </script>
    <script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/browse/babel-standalone@6.26.0/babel.min.js"></script>
</body>

======================= CSS =======================

.divstyle {
text-align: center;
background-color: #4285F4;
color: white;
height: 300px;
width: 100%;
font-size: 30px;

}

.HW {
text-align: center;
color: white;

}

标签： reactjsdom

解决方案

好的，这是我为使其正常工作而进行的一些小调整。

  1. 将 Babel/React 库的加载放在 head 标签中
  2. 使用当前的官方 Babel CDN，你的在 Chrome 中给了我一些问题
  3. 看起来你有一个错字，你有reactDOM而不是ReactDOM

我试过了，效果很好：

<html>
<head>
    <title>REACT</title>
    <script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="mainDiv" class="divstyle"></div>
    <script type="text/babel">

        let A = <div className="HW">HELLO WORLD!</div>;
        let B = document.getElementById("mainDiv");
        ReactDOM.render(A,B);

    </script>
</body>

推荐阅读