收到非常奇怪的错误“SyntaxError：'...'预期

我试图在反应中将一个道具传递给一个 REACTMAPGL，我正在调用方法displayMarkers()，它返回一个 JSX 元素的数组。

问题主要围绕为什么我在这个特定项目中遇到错误。我创建的组件很好，并且能够在本地的不同项目中使用它。但它似乎与 Typescript 有关，或者在我正在处理的当前代码库中更漂亮。

10% building 3/13 modules 10 active /Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/webpack-dev-server/client/utils/createSocketUrl.jsℹ ｢wdm｣: wait until bundle finished: /

95% emitting Prettier✖ ｢wdm｣: SyntaxError: '...' expected. (122:12)

  120 |           onViewportChange={setViewPort}

  121 |           style={{ left: 120, top: 50 }}

> 122 |           {displayMarkers()}

      |            ^

  123 |         />

  124 |         <NavigationControl showCompass={false} style={{ left: 140, top: 70 }} />

  125 |         <MapControl visibleMap={visibleMap} onMapChange={handleMapChange} />

    at t (/Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier/parser-typescript.js:1:285)

    at Object.parse (/Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier/parser-typescript.js:14:180461)

    at Object.parse (/Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier/index.js:9739:19)

    at coreFormat (/Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier/index.js:13252:23)

    at format (/Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier/index.js:13510:73)

    at formatWithCursor (/Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier/index.js:13526:12)

    at /Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier/index.js:44207:15

    at Object.format (/Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier/index.js:44226:12)

    at /Volumes/workplace/opsPortal/src/LeoAccessOperationsPortalStaticWebsite/node_modules/prettier-webpack-plugin/index.js:70:47

    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)

ℹ ｢wdm｣: wait until bundle finished: /

这是返回的完整 JSX：

if (transformRequest) {

    return (

    <div>

        <ReactMapGL

          {...viewport}

          width="80%"

          height={'65vh'}

          transformRequest={transformRequest}

          mapStyle={visibleMap}

          onViewportChange={setViewPort}

          style={{ left: 120, top: 50 }}

          {displayMarkers()}

        />

        <NavigationControl showCompass={false} style={{ left: 140, top: 70 }} />

        <MapControl visibleMap={visibleMap} onMapChange={handleMapChange} />

      </div>

    );

  } else return <div>{<h1>Loading...</h1>}</div>;

};

 

我尝试在 {displayMarkers()} 上放置一个 {/ prettier-ignore /}，但随后发生了完全相同的错误，但它指向了 {/ prettier-ignore /}。

注意：如果我添加扩展运算符，代码会编译，但它会破坏组件，因为组件应该是一个数组，但我认为它得到了一个对象。