Material Ui Box 元素的 DevOps Typescript 构建问题

Question

我在 Azure DevOps 中有一个 build 管道，我试图用它来 build 一个前端 React Typescript 应用程序。此应用程序使用 Material ui，问题似乎出在该库的代码上。我以前有 built 这个项目，但由于某种原因，现在当我运行 build 时，我得到这个错误代码：

'Box' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<BoxProps, any, any> | null' is not a valid JSX element.
    Type 'Component<BoxProps, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<BoxProps, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/home/vsts/work/1/s/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.  TS2786

    68 |     <React.Fragment>
    69 |       <div>
  > 70 |         <Box component="nav" className={classes.Nav}>
       |          ^
    71 |           <AppBar position="relative" className={classes.appBarStyles}>
    72 |             <Toolbar className={classes.toolbarStyles}>
    73 |               <div className={classes.toggleSlider}>

这是导航栏的代码：

  return (
    <React.Fragment>
      <div>
        <Box component="nav" className={classes.Nav}>
          <AppBar position="relative" className={classes.appBarStyles}>
            <Toolbar className={classes.toolbarStyles}>
                .....
            </Toolbar>
          </AppBar>
        </Box>
      </div>
    </React.Fragment>
  );

我升级了materialui、react和react-dom的版本，还有typescript类型；我尝试用 div 包围 Box 元素，我尝试使用打字稿忽略标志，但 none 似乎解决了这个问题。

我之前已经能够构建uild这个项目，所以我不太确定错误是从哪里来的。感谢任何帮助，谢谢。

Answer 1

你好，这里说 https://www.w3schools.com/tags/tag_nav.asp nav 应该包含 collection 个标签，我猜问题出在 component=“nav” 因为它期望“a 标签”是 child 抛出类型错误的 nav prolly。

有了 Mui，我认为 appbar 已经是一个正确的 html header 组件

Answer 2

升级到 React 18 似乎已经解决了这个问题。我在这里发现了解决方案：

Material Ui Box 元素的 DevOps Typescript 构建问题

DevOps Typescript Build Issue with Material Ui Box Element

javascript

typescript

reactjs

material-ui

azure-devops