javascript - 使用 JSX 导入 React 组件

问题描述

使用 JXS 导入反应组件时出现问题。组件是从库中导入的（像 SDK 一样使用）。

/sdk/dist/js/app.js

import React, { Component } from 'react';

 export default class Test extends Component {
    render() {
       return <div>Hello</div>;
    }
 }

有一个使用这个 SDK 的项目，有 webpack / babel 已经做了一个构建，这个组件的导入文件如下所示：

应用程序/js/index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Test from 'sdk/dist/js/App';

结果：

但！如果满足以下条件，一切都会奏效：

我们从这个组件中移除 JSX

应用程序/js/index.js

import React, { Component } from 'react';

export default class Test extends Component {
    render() {
        return React.createElement(
            "div",
            null,
            "Hello"
        );
    }
}

直接删除导入和插入组件。

应用程序/js/index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Test extends Component {
    render() {
        return <div>Hello</div>;
    }
}

问题是它需要通过导入来工作。我建议问题在于 webpack 没有转置导入的文件 - 并按原样读取它......

网络包：

{
      entry: './app/js/index.js',
      output: {
        path: resolve(__dirname, plConfig.paths.public.root),
        filename: "[name].js"
      },

      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: [
              {
                loader: "babel-loader",
                options: {
                  cacheDirectory: true
                }
              }
            ]
          }
        ]
      }

.babelrc：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

标签： javascriptreactjswebpackjsxbabeljs

你需要一个 babel 插件来转换 jsx ......

@babel/plugin-transform-react-jsx

安装 npm i -D @babel/plugin-transform-react-jsx

在 .babelrc 中使用

{
    presets: [ ... ],
    plugins: [ "@babel/plugin-transform-react-jsx", ...other plugins ]
}

编辑：

您还需要为 jsx 添加 babel 规则...在您的webpack模块规则中...

更改test: /\.js$/为test: /\.jsx?$/

javascript - 使用 JSX 导入 React 组件

问题描述

解决方案

推荐阅读