使用JSX导入React组件

Question

[用JXS导入react组件时出现问题。组件是从库中导入的（用作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已在构建，导入了该组件的文件如下所示：

app / js / index.js

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

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

结果：

但是！一切都会在以下情况下工作：

1. 我们从此组件中删除了JSX

app / js / index.js

import React, { Component } from 'react';

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

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

app / js / index.js

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

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

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

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"
  ]
}

[用JXS导入react组件时出现问题。组件是从库中导入的（像SDK一样使用）。 /sdk/dist/js/app.js从'react'导入React，{组件};导出默认值...

Answer 1

您需要babel插件来转换jsx ...