个人中心
gpt4 book ai didi

javascript - 如何导入 react 文件

转载 作者：行者123 更新时间：2023-12-03 05:12:03 24 4
gpt4 key购买 nike

我对 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 文件包含在同一文件夹 ->/scripts 中。我还有以下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 代码的好工具，我将不胜感激。

最佳答案

我使用 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

检查它是否适合您(如果不适合，请提供您收到的确切错误)

关于javascript - 如何导入 react 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41768888/

24 4 0
文章推荐： javascript - Typescript 泛型未返回正确的类型
文章推荐： javascript - lodash 可以将一个对象中的键列表本地拉到一个新对象中吗？
文章推荐： javascript - Koa 将数据从服务器传递到客户端
文章推荐： javascript - 使用 JavaScript 的复选框条件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com