react片段速记无法编译

IT技术 javascript reactjs create-react-app
2021-03-31 13:27:49

有问题的项目正在使用 React-16.2.0,它能够使用 Fragment 和 Fragment 速记。

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

速记无法编译,我不知道为什么会这样。例如...

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 速记语法的遗漏吗?

3个回答

我认为这是一个原因:

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

截屏

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 一起使用

在 Code 中使用babel独立尝试过,7.1.0但它仍然不起作用..
2021-05-24 13:27:49
是否有 babel-standalone 7.* 的 CDN 版本?
2021-06-10 13:27:49
是的@Petruza - 最新 babel-standalone 的 CDN 链接是: <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
2021-06-18 13:27:49

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

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

因为节点数组是有效的 jsx 元素。key尽管正如Anarno指出的那样,您需要手动为每个props添加一个props

只需为每个元素添加一个键!
2021-06-13 13:27:49

Fragment 语法仅支持 Babel v7.0.0-beta.31 及以上版本。