【发布时间】：2017-08-18 17:52:30
【问题描述】：
我试图了解如何在 React 应用程序中创建（可能导出？）和使用（导入？）组件？例如，下面的小型 React 应用程序是一个 .HTML 文件并且运行良好。它一遍又一遍地显示随机数。因此，如果我想将类 ShowRandomNumbers extends React.Component 放入一个单独的文件中（带有扩展名....什么 .JSX？）并在带有 import 语句的 HTML 文件中使用它，我需要哪些步骤做？
我习惯了使用外部 JS 和 CSS 文件的概念，比如：
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
和
<link rel="stylesheet" href="../../css/base200.css" />
但我只是使用简单的编辑器和另存为独立文件创建的那些文件。我在谷歌上搜索了导出默认值和导入，我看到了类似的语法 导出默认应用程序；并从 './App.jsx' 导入 App；但没有明确的“如何”。 我需要实用程序来创建 JSX 文件吗？
我们将不胜感激。 谢谢。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>79E - ALL CDN</title>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
class ShowRandomNumbers extends React.Component {
constructor(props) { super(props); }
render() {
var elapsed = Math.round(this.props.timeNow / 100);
var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
var r1 = this.props.random1;
return (
<p >Running for {seconds} seconds. Random 1 is: {r1} Random 2 is: {this.props.random2} </p >
);
} // render -- END
} // Class - End
var start = new Date().getTime();
setInterval(function() {
ReactDOM.render(
<ShowRandomNumbers
timeNow={ new Date().getTime() - start }
random1= { Math.floor(Math.random() * (500 - 100 + 1)) + 100 }
random2= { Math.floor(Math.random() * (600 - 100 + 1)) + 100 }
/>,
document.getElementById('container')
);
}, 50);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
</body>
</html>
【问题讨论】：
-
jsx文件不能直接使用，浏览器不理解jsx文件。您需要将其转换为 js 文件。您可以使用this module 来完成此任务。
-
感谢您的回复。我一直在看 babel 和 npm 等。重新导入/导出，在我看来（可能是错误的）导入有点，嗯，假的！在那个 webpack 中，所有东西都被整合到一个模块中，所以没有“真正的”动态加载。比如说，Windows 操作系统中的 .dll 会在需要时加载。在这种情况下，它不就像一个常规的脚本语句吗？
标签： reactjs jsx es6-modules es6-class