外部反应文件无法正常工作

在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/[email protected]/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文件中使用所有反应代码。我究竟做错了什么？

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

来源

2017-09-25 Ericson Willians

你有在任何错误，运行相同的代码片段控制台?,我不认为“导入”是可行的，因为它需要进行转发，并且随着导入反应并作为外部文件作出反应，这些文件暴露在全局变量React和ReactDOM，所以我猜，没有必要使用import – AngelSalazar

检查这个小例子https://jsbin.com/laqiribeze/edit?html,js,output，注意到js选项卡设置为ES6/babel，所以我的代码是transpiled – AngelSalazar

我已经添加了一个控制台错误的截图到帖子。我也尝试删除导入，但没有奏效。 –

-1

在反应您使用函数返回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"));

来源

2017-09-25 15:44:36 melmquist

我这样做了，我继续得到错误。问题可能在其他地方，链接部分或其他地方。 –

@melmquist这不起作用 - 你的例子创建一个简单的React组件，但是'ReactDOM.render（）'需要一个元素。 –

只需从代码中删除导入语句。

在脚本中首先添加'react'，然后添加'react-dom'。它一定会工作！

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

<!DOCTYPE html> 
<html> 
<head> 
     <meta charset="UTF-8" /> 
     <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
     <script src="https://unpkg.com/[email protected]/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

来源

2017-09-25 15:57:53

当我这样做时，控制台上出现以下错误：'未捕获的ReferenceError：未定义ReactDOM'。它找不到ReactDOM，因为它没有被导入，并且当我导入时，它表示“require”没有被定义。 –

外部反应文件无法正常工作

回答

相关问题