带有 React 18 的 Chakra UI - 无效的 jsx答案

【问题标题】：Chakra UI with React 18 - invalid jsx带有 React 18 的 Chakra UI - 无效的 jsx
【发布时间】：2022-11-11 07:15:44
【问题描述】：

我正在尝试找到一种方法使 Chakra UI 代码在下一个 js 应用程序中与 react 18 一起工作。

当我尝试使用以组件开头的组件时，我收到一条错误消息：

意外令牌Stack。预期的 jsx 标识符

我尝试向组件添加外部和 <React.Fragment> 标记 - 每次，我都会收到相同的错误。

满足这个要求的 jsx 标识符是什么？

完整的页面是：

import * as React from "react"
import { gql } from "@apollo/client"
import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  Box,
  Button,
  Center,
  Flex,
  Spinner,
  Stack,
  Text,
  useDisclosure,
} from "@chakra-ui/react"

import { useDestroyAccountMutation } from "lib/graphql"
import { useLogout } from "lib/hooks/useLogout"
import { useMe } from "lib/hooks/useMe"
import { useMutationHandler } from "lib/hooks/useMutationHandler"
import { withAuth } from "components/hoc/withAuth"
import { HomeLayout } from "components/HomeLayout"
import { ProfileLayout } from "components/ProfileLayout"
import { Tile, TileBody, TileFooter, TileHeader, TileHeading } from "components/Tile"

const _ = gql`
  mutation DestroyAccount {
    destroyAccount
  }
`

function Settings() {
  const alertProps = useDisclosure()
  const { me, loading } = useMe()
  const logout = useLogout()
  const cancelRef = React.useRef<HTMLButtonElement>(null)
  const handler = useMutationHandler()

  const [destroy, { loading: destroyLoading }] = useDestroyAccountMutation()

  const handleDestroy = () => {
    return handler(destroy, { onSuccess: () => logout() })
  }
  if (loading)
    return (
      <Center>
        <Spinner />
      </Center>
    )
  if (!me) return null
  return (
    
    <Stack spacing={6}>
      <Tile>
        <TileHeader>
          <TileHeading>Danger zone</TileHeading>
        </TileHeader>
        <TileBody>
          <>
          <Text fontSize="sm">
            paragraph 1.  
          </Text>
          <Text fontSize="sm" mt="30px">
            paragraph 2.
          <Text />
          </>
        </TileBody>
        <TileFooter>
          <Flex w="100%" justify="flex-end">
            <Button
              size="sm"
              colorScheme="red"
              isDisabled={destroyLoading}
              isLoading={destroyLoading}
              onClick={alertProps.onOpen}
            >
              Delete
            </Button>
          </Flex>
          <AlertDialog
            {...alertProps}
            motionPreset="slideInBottom"
            isCentered
            leastDestructiveRef={cancelRef}
          >
            <AlertDialogOverlay>
              <AlertDialogContent>
                <AlertDialogHeader fontSize="lg" fontWeight="bold">
                  Delete account
                </AlertDialogHeader>
                <AlertDialogBody>Are you sure? </AlertDialogBody>
                <AlertDialogFooter>
                  <Button ref={cancelRef} onClick={alertProps.onClose}>
                    Cancel
                  </Button>
                  <Button
                    colorScheme="red"
                    onClick={handleDestroy}
                    isLoading={destroyLoading}
                    isDisabled={destroyLoading}
                    ml={3}
                  >
                    Delete
                  </Button>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialogOverlay>
          </AlertDialog>
        </TileFooter>
      </Tile>
    </Stack>
    
  )
}

Settings.getLayout = (page: React.ReactNode) => (
  <HomeLayout>
    <ProfileLayout>{page}</ProfileLayout>
  </HomeLayout>
)

export default withAuth(Settings)

【问题讨论】：

请出示代码

标签： reactjs next.js chakra-ui

【解决方案1】：

文档说：您可以使用<Stack> 组件并传递方向道具。所以我假设你可能需要这里的方向道具。喜欢：<Stack direction='row' spacing={6} </Stack> 或 <Stack direction={['3', '4']} spacing={6} </Stack>

【讨论】：

谢谢 Jaanus - 我试过这个，但是在不使用方向属性时得到了与我报告的相同的错误。

【解决方案2】：

以防它帮助别人。我删除了节点模块并重新运行了纱线。执行此操作后，此错误消失。它没有回答问题 - 但它可能会帮助某人。

【讨论】：