Question

我是ReactJS的新手，我正在构建足够的组件，它们应该分散在几个不同的文件中（仅用于组织/可读性）。但是，我似乎无法使if(!document.getElementById('googleFont1')) { var link = document.createElement('link'); link.id = 'googleFont1'; link.rel = 'stylesheet'; link.href = 'https://fonts.googleapis.com/css?family=Architects+Daughter'; document.head.appendChild(link);功能正常工作。这是我处理的场景的简化版本：

import：

ExportMe.jsx

class A extends React.component { render() { return <h1>Data below:</h1> } } export default class B extends React.component { render() { return <div><A/><span>{this.props.data}</span></div> } }：

Importer.jsx

在HTML中，我只是编写import {B} from "ExportMe.jsx"; $.getJSON( "./data/json_files/Intro.json", function(data) { ReactDOM.render( <TextDisplay data={data}/>, document.getElementById('centerPanel') ); })但我在控制台中收到以下错误：

<script type="text/jsx" src="jsx/Importer.jsx"></script>

我甚至没有使用RequireJS，导入它并没有解决此错误。如果我也尝试在HTML中包含Uncaught Error: Module name "ExportMe.jsx" has not been loaded yet for context: _. Use require([])，那么我会收到错误，告诉我未定义导出。我该如何处理这个问题，还是我真的需要将所有ReactJS组件合并到一个文件中？

Answer 1

删除花括号，如果exportme.jsx文件与importer.jsx在同一文件夹中，则应在文件前加上'./'，如下所示：从“./ExportMe.jsx”导入B;

Answer 2

导入中的

，请更改

import {B} from "ExportMe.jsx";
import B from "ExportMe.jsx";

导入功能时使用{functionName}

Answer 3

这里导入有2个问题。您的代码应如下所示

ExportMe.jsx：

class A extends React.component {
    render() {
        return <h1>Data below:</h1>
    }
}
export default class B extends React.component {
    render() {
        return <div><A/><span>{this.props.data}</span></div>
    }
}
export class C extends React.component {
    render() {
        return <div><A/><span>{this.props.data}</span></div>
    }
}

Importer.jsx：

import B, {C} from './ExportMe.jsx';

B将在没有大括号的情况下导入，因为它在ExportMe.jsx文件中设置为默认导出对象; ＆＃39; C＆＃39;将使用大括号导入，因为它也会导出，但不会导出为default

注意：如果您键入import B from 'ExportMe.jsx'; - 它将查看节点包而不是文件。这就是您导入表单文件时必须使用./的原因。

导入ReactJS组件

3 个答案: