Question

在index.html我有：

<div class="header-content-inner" id="example">
    ...
</div>

然后：

<script src="js/react-dom.js"></script>
<script src="js/react.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel" src="js/segui-info.jsx"></script>

这个“segui-info”是带有反应代码的外部js文件：

import React from 'react';
import ReactDOM from 'react-dom';

var ex = <h1>It worked!</h1>;

ReactDOM.render(ex, document.getElementById("example"));

你可以猜到，“ex”没有被附加/呈现给那个div。我是初学者，我很难理解为什么它不起作用。在简单示例just like this one中，他们使用<script>标记内的反应代码。我不想在.html文件中使用所有反应代码。我做错了什么？

编辑：这是我在控制台上得到的：

Answer 1

只需从代码中删除import语句。

在您的脚本中首先添加＆＃39;做出反应＆＃39;然后添加＆＃39; react-dom＆＃39;。它一定会奏效！

以下是简单的工作示例

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8" />
        <script src="https://unpkg.com/react@latest/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
        <script src="https://unpkg.com/babel-standalone@latest/babel.min.js"></script>
        <script type="text/babel" src="ext.jsx"></script>
</head>
<body>
        <div id="example"/>
</body>
</html>

在ext.jsx中会有

var ex = <h1>It worked!</h1>;
ReactDOM.render(ex, document.getElementById('example'));

您可以在上面运行相同的代码段 jsfiddle

Answer 2

在反应中你使用函数来返回JSX，在你的例子中var ex = <h1>It worked!</h1>;可能只是对一个字符串进行类型转换，而是你需要使它成为一个返回你想要的代码的函数。请尝试以下方法：

import React from 'react';
import ReactDOM from 'react-dom';

const ex = () => (
    <h1>It worked!</h1>;
);    

ReactDOM.render(ex, document.getElementById("example"));

外部反应文件不起作用

2 个答案: