Javascript 使用JSX导入React组件

使用JXS导入react组件时出现问题。组件从库中导入（与SDK一样使用）

/sdk/dist/js/app.js

import React, { Component } from 'react';

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

结果:

但是！ 如果：

我们从这个组件中删除JSX

app/js/index.js

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

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

import React, { Component } from 'react';

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

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

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

直接删除导入和插入组件

app/js/index.js

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

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

import React, { Component } from 'react';

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

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

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

.LRC：

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

---

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

@babel/plugin-transform-resact-jsx

安装

npmi-D@babel/plugin-transform-resact-jsx

使用在.lrc中

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

编辑：

您还需要为jsx添加巴别塔规则。。。 在您的网页包模块规则中

---

将

test:/\.js$/

更改为

test:/\.jsx？$/

非常确定您需要在babel配置中将jsx转换为js。看看你是否有任何样式表在任何地方。。。你需要一个css加载器也安装在你的网页…我已经安装并添加了这个插件在我的babelrc，但仍然给出了一个错误。。“您可能需要一个合适的加载程序来处理此文件类型。”在您的网页模块规则中，将

测试：/\.js$/

更改为测试：

/\.jsx？$/

我是否应该将文件index.js更改为index.jsx？没有必要。。正则表达式

/\.jsx？$/

同时针对

js

和

jsx

…我注意到一些ide在文件类型为jsx时提供了额外的编码帮助（例如Emmet支持）。。。