web-dev-qa-db-ja.com

Reactフラグメントの略記がコンパイルに失敗する

問題のプロジェクトは、フラグメントとフラグメントの速記を使用する機能を備えたReact-16.2.0を使用しています。

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.

ここに、フラグメントの短縮構文について欠けているものがありますか？

javascriptreactjscreate-react-app
20
Robert Byrne

これが理由だと思う：

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

22
KORA

フラグメント構文は、Babel v7.0.0-beta.31以降でのみサポートされています。

0
Shariq Ansari