React 片段 shorthand 编译失败

Question

有问题的项目正在使用 React-16.2.0，它能够使用 Fragments 和 Fragment shorthand。

https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

虽然全长语法工作正常...

import React, { Fragment, Component } from 'react';

class TestingFragment extends Component {
    render() {
        return (
            <Fragment>
                <span>This is a fragment of text </span>
                <div>Another part of the fragment</div>
            </Fragment>
        )
    }
};

export default TestingFragment

shorthand 编译失败，我不知道为什么会这样。例如...

import React, { Component } from 'react';

class TestingFragment extends Component {
    render() {
        return (
            <>
                <span>This is a fragment of text </span>
                <div>Another part of the fragment</div>
            </>
        )
    }
};

export default TestingFragment

编译失败如下...

Failed to compile
./src/testingFragments.js
Syntax error: Unexpected token (6:4)

  4 |   render() {
  5 |       return (
> 6 |           <>
    |            ^
  7 |               <span>This is a fragment of text </span>
  8 |               <div>Another part of the fragment</div>
  9 |           </>
This error occurred during the build time and cannot be dismissed.

关于 Fragment shorthand 语法，我是否遗漏了什么？

Answer 1

我认为这是一个原因：

https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax

screenshot

create-react-apps 目前使用 Babel 6.26.0 要获得全面支持，需要 React.Fragment Babel v7.0.0-beta.31 及更高版本

======================= 编辑

它现在可以使用 create-react-app v2 https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

Answer 2

仅 Babel v7.0.0-beta.31 及更高版本支持片段语法。

Answer 3

您可以使用 穷人的 片段 shorthand 作为快速修复：[ , ]

render(){
  return [
    <div key="f">foo</div>,
    <div key="b">bar</div>
  ]
}

因为节点数组是有效的 jsx 元素。正如指出的那样，您需要手动为每个人添加一个 key 道具。

React 片段 shorthand 编译失败

React fragment shorthand failing to compile

javascript

reactjs

create-react-app