Question

我有ListItem，在某些情况下希望您将其设为红色。我已经创建了样式的mui组件：

function StyledListItem({ hasErrors, ...props }) {
  const classes = listItemStyles();
  return (
    <ListItem
      classes={{
        root: clsx({
          [classes.root]: hasErrors,
        }),
        selected: clsx({
          [classes.selected]: hasErrors,
        }),
      }}
      {...props}
    />
  );
}

在这种情况下，我有ESLint错误：“道具验证中缺少'hasErrors'”。如果我这样做

function StyledListItem(props: any) {
...
}

我有一个警告：React无法识别DOM元素上的hasErrors道具。如果您有意让它作为自定义属性出现在DOM中，请改为将其拼写为小写haserrors。如果您不小心从父组件传递了它，请将其从DOM元素中删除。

如何摆脱“道具验证中缺少'hasErrors'”错误？

Answer 1

您需要将ts类型添加到道具中，例如：

function StyledListItem({ hasErrors, ...props }: {hasErrors: boolean}) {

这将告诉打字稿至少具有hasError属性。这样您就可以像提取它一样提取它了。

您应该阅读更多有关react +打字稿的信息。如果您需要孩子，可以使用React.FC类型：

function StyledListItem({ hasErrors, ...props }: {hasErrors: boolean, children: JSX.Element}) {

Answer 2

在界面中添加[key: string]: React.ReactNode;可以解决问题。

interface IStyledListItemProps {
  hasErrors: boolean;
  [key: string]: React.ReactNode;
}

MUI样式的组件+一个新的prop（打字稿）

2 个答案: