无法弄清楚为什么我的代码无法呈现

Question

我正在尝试使用 React 构建一个简单的应用程序，我正在使用 Codepen。我无法让我的第一个组件呈现，即使它是一个非常基本的代码并且对我来说看起来是正确的。我包括了 React、ReactDOM 和 Babel。项目的 html 部分有一个 ID="root" 的 div。以下代码不会呈现任何内容，我似乎无法弄清楚原因。

class App extends React.Component {
  render() {
    return(
    <div>Hello World</div>
    );
  }
}

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

Answer 1

问题似乎是脚本顺序错误。确保在 ReactDOM 之前加载 React 脚本。

更改它们似乎可以解决问题，here's a forked version

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>

Answer 2

您的 CDN 链接似乎有问题。我使用了 https://reactjs.org/docs/cdn-links.html

中的这些

https://unpkg.com/react@16/umd/react.production.min.js

https://unpkg.com/react-dom@16/umd/react-dom.production.min.js

而且效果很好。

无法弄清楚为什么我的代码无法呈现

Can't figure out why my code won't render

reactjs

codepen