Question

我知道有很多类似的问题，但是我没有找到解决方案，并且其中一些已经过时了，因此不适用。

我已经创建了一个Webpack环境来进行响应，但是没有编译JSX语法。

我正在使用：

"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",

在我的babel.config.js中，我有：

  ...
  'presets': [
    [
      '@babel/preset-env',
      {
        'targets': {
          'chrome': 61,
        },
        'modules': false,
        'useBuiltIns': 'usage'
      },
      '@babel/preset-react'
    ]
  ],
  ...

我可以像这样编译React代码：

import React from 'react'
import ReactDOM from 'react-dom'
require('./scss/main.scss')

const e = React.createElement

class LikeButton extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      liked: false
    }
  }

  render () {
    if (this.state.liked) {
      return 'You liked this.'
    }

    return e(
      'button',
      {
        onClick: () => this.setState({
          liked: true
        })
      },
      'Like'
    )
  }
}

const domContainer = document.querySelector('#like_button_container')
ReactDOM.render(e(LikeButton), domContainer)

但是当我尝试使用JSX时

const name = 'Name';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

它抱怨<中的h1

这是我的仓库：

https://github.com/sebalaini/test

Answer 1

将@babel/preset-react移动到@babel/preset-env的配置之外（将其移动到数组之外），就像这样：

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

@babel/preset-react应该与您的presets处于同一级别（@babel/preset-env的最高级别）。

Answer 2

您代码中的

const element不是有效的React组件。您需要返回一个函数，并始终以大写字母开头组件名称。

// Always import React at the top of the file!
import React from 'react';

function Person(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Person name="Name of the person" />;

ReactDOM.render(
  element,
  document.getElementById('root')
);

更多有关组件的信息：https://reactjs.org/docs/components-and-props.html

webpack / react / babel无法编译JSX

2 个答案: