Trung tâm cá nhân
sách gpt4 ai đã đi

node.js - 使用 Webpack 和 JSX 导入 React 无法识别

In lại 作者：太空宇宙 更新时间：2023-11-04 02:17:04 26 4
mua khóa gpt4 Nike

我有点困惑，因为我的类(class)为 React 分配了三个单独的指南，而且它们的做法都不同。我还不清楚我们正在做的哪些元素是 Webpack，哪些是 ES6，哪些是 Node，所以如果我描述得很糟糕，请原谅我。

我有以下gói.json ，跳过不必要的字段:

{
    "phụ thuộc": {
        "react": "^0.14.7",
        "react-dom": "^0.14.7",
        "webpack": "^1.12.13"
    },
    "devDependencies": {
        "babel-core": "^6.4.5",
        "babel-loader": "^6.2.2",
        "babel-preset-es2015": "^6.3.13",
        "jshint": "^2.9.1",
        "jshint-loader": "^0.8.3",
        "node-libs-browser": "^1.0.0"
    }
}

我跑cài đặt npm .

现在我有了这个 Webpack 配置:

"use strict";
let webpack = require('webpack');

module.exports = {
    entry: ["./main.es6"],
    output: {
        filename: "compiled.js"
    },
    module: {
        loaders: [
            {
                test: /\.es6$/g,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.es6']
    },
    watch: true
};

据我了解，它只是运行 main.es6以及它需要/引用/通过 Babel 加载器导入的任何文件。我确实有一个.babelrc文件设置完毕，我可以确认它确实有效(将箭头函数、类等内容转换为 ES5)。

现在这是棘手的部分。我的页面将是一张彩票抽奖表；我的 React 组件是一行，它传递六个数字的数组并将其附加到现有表中。

import React từ 'react';
import ReactDOM from 'react-dom';

const Drawing = props => (
 
     {props.numbers.map(n => {n})}
 
);

ReactDOM.render(, document.getElementsByTagName("table")[0]);

这让我在 的时刻出现 SyntaxError 异常。被写。这让我很困惑，因为在我看来，如果 React 导入成功(显然是这样)，那么 JSX 就应该被理解。 'props的箭头函数' 风格显然有点不寻常，但是 (a) class Drawing extends React.Component form 也有同样的问题，并且 (b) 我一直被灌输这种无状态/函数式风格现在更适合使用，而且我可以看到它的优点。

我很抱歉写了一篇充满代码示例的长帖子，但我不知道这里什么重要，什么不重要。我不知道如何正确谷歌这个问题，而且我无法真正遵循我头脑中的逻辑，因为我只是陷入“好吧，React 导入，所以......为什么 JSX 不起作用？”

1 Câu trả lời

将以下行添加到您的 .babelrc 文件中:

{
  "presets": ["react"]
}

将 JSX 语法转换为原生 JavaScript 需要它。如果您还没有安装 babel React preset，请运行 npm install babel-preset-react.

React import succeeds (which it apparently does) then the JSX should be understood.

React 不用于转换 JSX 语法，它完全由 Babel Syntax JSX 插件完成。而且 React 的库文件中没有使用 JSX，因此导入成功。

关于node.js - 使用 Webpack 和 JSX 导入 React 无法识别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35241354/

26 4 0
Bài viết được đề xuất: javascript - Appium Node 示例测试未运行
Bài viết được đề xuất: CSS:使用框边框
Bài viết được đề xuất: c++ - 部署
Bài viết được đề xuất: node.js - 检查 semver 是否正确
太空宇宙
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com