Fatal编程技术网

Javascript 外部文件不工作

javascript reactjs

Javascript 外部文件不工作,javascript,reactjs,Javascript,Reactjs,在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-standal

在
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信息”是包含react代码的外部js文件：

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

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

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

从“React”导入React；
从“react dom”导入react dom；
var ex=它起作用了！；
render（例如，document.getElementById（“示例”）；
正如你所猜测的，“前”并没有被附加/呈现到那个div中。我是一个反应的初学者，我无法理解为什么它不起作用。在简单的示例中，它们在
标记中使用react代码。我不想在.html文件中使用所有react代码。我做错了什么

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

在react中，您使用函数返回JSX，在您的示例中，
var ex=It worked
可能只是对一个字符串进行类型转换，而您需要使其成为一个返回所需代码的函数。请尝试以下操作：

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

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

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

从“React”导入React；
从“react dom”导入react dom；
常数ex=（）=>(
成功了！；
);    
render（例如，document.getElementById（“示例”）；
只需从代码中删除导入语句即可

在脚本中，首先添加“react”，然后添加“react dom”。这肯定会有用的

下面是一个简单的工作示例

<!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'));

var ex=成功了！；
render（例如document.getElementById（'example'）；
您可以在上运行相同的代码段

控制台中是否有任何错误？我认为“导入”不起作用，因为它需要传输，并且当您导入react dom并作为外部文件进行响应时，这些文件公开了全局变量react and react dom，因此我猜，不需要使用importcheck这个小示例，注意js选项卡设置为ES6/babel，因此，我的代码是透明的。我在帖子中添加了控制台错误的屏幕截图。我也尝试过删除导入，但不起作用。babel选项卡代码如何链接到HTML，没有链接。该选项卡只是用户插入代码的入口点，在后端JSbin会获取我编写的代码并编译它，然后显示它输出选项卡（这是一个iframe）。我这样做了，我继续得到错误。问题可能在其他地方，链接部分或其他地方。@melmquist这不起作用-您的示例创建了一个简单的React组件，但
ReactDOM.render（）
需要一个元素。执行此操作时，控制台上出现以下错误：
uncaughtreferenceerror:ReactDOM未定义
。它找不到ReactDOM，因为它没有被导入，当我导入时，它说“require”没有定义。