使用 Material Ui 框元素的 DevOps Typescript 构建问题答案

【问题标题】：DevOps Typescript Build Issue with Material Ui Box Element使用 Material Ui 框元素的 DevOps Typescript 构建问题
【发布时间】：2022-11-10 23:50:30
【问题描述】：

我在 Azure DevOps 中有一个构建管道，我正在尝试使用它构建一个前端 React Typescript 应用程序。此应用程序使用 Material ui，问题似乎出在该库的代码上。我之前已经构建了这个项目，但是由于某种原因，现在当我运行构建时，我收到了这个错误代码：

'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 元素，并尝试使用 typescript 忽略标志，但似乎都没有解决问题。

我之前已经能够构建这个项目，所以我不太确定错误来自哪里。任何帮助表示赞赏，谢谢。

【问题讨论】：

标签： javascript reactjs typescript azure-devops material-ui

【解决方案1】：

升级到 React 18 似乎已经解决了这个问题。我在这里发现了这个解决方案：Some components "cannot be used as a JSX component"

【讨论】：

【解决方案2】：

嗨，正如这里所说的 https://www.w3schools.com/tags/tag_nav.asp nav 应该保存一个标签的集合，猜测问题是 component=“nav”，因为它期望“a tag”是引发类型错误的 nav prolly 的孩子。

使用 Mui 我认为 appbar 已经是一个正确的 html 标头组件

【讨论】：

谢谢，是的，我完全删除了 Box 组件，它按预期工作。但是，现在我有一个完全不同的组件，它从库“React Loading”中给我同样的错误错误说：“ReactLoading”不能用作 JSX 组件。它的实例类型“正在加载”不是有效的 JSX 元素。对于任何自定义 React 库元素，似乎都会出现此错误。我不确定它为什么这样做。
好的，我在这里找到了另一个回复，将 React 升级到 18 似乎已经解决了这个问题。 stackoverflow.com/questions/71841181/…

【解决方案3】：

在 box 组件内添加 'component' 道具以解决 mui 框中的 typescript 错误。对于组件道具，将输入作为 div 或 span

<Box component="div">
----
--
</Box>

【讨论】：