Question

我是JavaScript和React.js的新手，我在导入方面遇到了麻烦。

我有以下index.js文件：

var Main = React.createClass ({
    render: function() {
        return (
            <div>test</div>
        );
    }
});


ReactDOM.render(
    <Main/>,
    document.getElementById('content')
);

以下pub.js文件：

export default class Pub extends React.Component {
    render() {
        return <div>test</div> ;
    }
};

pub.js文件和index.js文件包含在同一文件夹中 - ＆gt; /脚本。我还有以下index.html文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Application</title>
    <!-- Not present in the tutorial. Just for basic styling. -->
    <link rel="stylesheet" href="css/base.css" />
    <script src="https://unpkg.com/react@15.3.0/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.0/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/remarkable@1.7.1/dist/remarkable.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel" src="scripts/index.js"></script>
  </body>
</html>

这非常合适，即加载一个显示“test”的页面

但是，如果我只是导入Pub类（甚至没有使用它），如下所示，应用程序中断并且屏幕上没有任何内容呈现。

import Pub from './pub'

var Main = React.createClass ({
    render: function() {
        return (
            <div>test</div>
        );
    }
});


ReactDOM.render(
    <Main/>,
    document.getElementById('content')
);

此外，如果错误是由未使用的导入引起的，我还尝试了以下内容：

ReactDOM.render(
    <Pub/>,
    document.getElementById('content')
);

如果有人能够对这个问题有所了解，或者甚至更好，请指出一个很好的语法检查工具React.js代码我会很感激。

Answer 1

我正在使用webpack构建/转换/提供我的代码。

我已经尝试了你的样本，它可以在这样的设置中运行：

我创建了Pub.jsx组件并以这种方式导出：

import React from 'react';

class Pub extends React.Component {
    render() {
        return <div>ĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄ</div>;
    }
}

export default Pub;

然后我将Pub组件导入到同一目录中的另一个组件并正确呈现：

import React from 'react';

import Pub from './Pub';

class ExplorableList extends React.Component {
    render() {
        return (<Pub />);
    }
}

export default ExplorableList;

在浏览器中呈现结果：https://www.screencast.com/t/Ojwrq3KNE

我的文件夹结构：https://www.screencast.com/t/9Mi8LLdnv

检查它是否适合您（如果没有，请提供准确的错误）

如何导入反应文件

1 个答案: