Material-UI - 如何将自定义道具传递给自定义 TreeItem？答案

【问题标题】：Material-UI - How to pass custom props to a custom TreeItem?Material-UI - 如何将自定义道具传递给自定义 TreeItem？
【发布时间】：2021-10-07 12:22:01
【问题描述】：

我需要将参数category 传递给CustomTreeItem，即TreeItemContent。
文档：https://mui.com/ru/api/tree-item/

import TreeItem, {
  TreeItemProps,
  useTreeItem,
  TreeItemContentProps,
} from '@material-ui/lab/TreeItem';

interface CatProps {
  name: string,
  id: string,
}

interface CatItemContentProps extends TreeItemContentProps {
  category: CatProps,
}

const CustomContent = React.forwardRef(function CustomContent(
    props: CatItemContentProps,
    ref,
  ) {
    const { category } = props;
    console.log(category); // undefined

  return <></>;
  }
);


interface CatItemProps extends TreeItemProps {
  category: CatProps,
}

const CustomTreeItem = (props: CatItemProps) => {
  return (
    <TreeItem ContentComponent={CustomContent} {...props} />
  );
};

我该怎么做？

第一次回答后的澄清

新代码是：

const CustomContent = React.forwardRef(function CustomContent(
  props: TreeItemContentProps,
  ref
) {
  return (
    <div ref={ref as React.Ref<HTMLDivElement>}>
      {props.label} {props.myProps}
    </div>
  );
});

const CustomTreeItem = (props: TreeItemProps) => {
  return <TreeItem ContentComponent={CustomContent} {...props} />;
};

export default function App() {
  return (
    <TreeView>
      <CustomTreeItem
        nodeId="1"
        label="Applications"
        ContentProps={{
          myProps: "my props"
        }}
      ></CustomTreeItem>
    </TreeView>
  );
}

我已经在代码沙箱中制作了它，它工作正常：
https://codesandbox.io/s/clever-volhard-km9xf?file=/src/App.tsx

但我的代码有一个新错误：

Type '{ myProps: string; }' is not assignable to type 'HTMLAttributes<HTMLElement>'.
Object literal may only specify known properties, and 'myProps' does not exist in type 'HTMLAttributes<HTMLElement>'

Google 从另一个人那里给了我同样的问题：
https://issueexplorer.com/issue/mui-org/material-ui/28668

此类型的可用属性是：
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/1349b640d4d07f40aa7c1c6931f18e3fbf667f3a/types/react/index.d.ts#L1743

如何将我的自定义道具传递给 ContentProps？

【问题讨论】：

您编辑问题时我没有收到通知，如果您想提出后续问题，可以在我的回答中发表评论，这样您的消息就会显示在我的收件箱中。

标签： reactjs typescript material-ui

【解决方案1】：

使用ContentPropsprops，会和原来的TreeItemContentProps合并

<CustomTreeItem
  nodeId="1"
  label="Applications"
  ContentProps={{
    myProps: "my props",
  }}
>

const CustomContent = React.forwardRef(function CustomContent(
  props: TreeItemContentProps,
  ref
) {
  console.log(props.myProps); // "my props"

编辑：对于打字稿用户，还需要扩充TreeItemContent的prop接口来消除错误：

declare module "@material-ui/lab/TreeItem" {
  interface TreeItemContentProps {
    myProps: string;
  }
}

ContentProps 本身无法增强，这是 MUI API 的一个缺点，解决方法是直接忽略它：

ContentProps={
  {
    myProps: "my props"
  } as any
}

【讨论】：

我已经在代码沙箱中制作了它，它工作正常：codesandbox.io/s/clever-volhard-km9xf?file=/src/App.tsx。但是我在 IDE VS 中的代码出现了一个新错误：Type '{ myProps: string; }' is not assignable to type 'HTMLAttributes<HTMLElement>'. Object literal may only specify known properties, and 'myProps' does not exist in type 'HTMLAttributes<HTMLElement>' 这种类型的可用属性是：github.com/DefinitelyTyped/DefinitelyTyped/blob/… 如何将自定义道具传递给 ContentProps？
@user3713526 您在我的回答中缺少最后两个代码 sn-ps：{ myProps: "my props" } as any。请参阅thiscodesandbox。

【解决方案2】：

按照当前文档执行以下步骤

我找到了下面文档中提到的方法

代码参考：https://github.com/mui/material-ui/blob/512896973499adbbda057e7f3685d1b23cc02de9/docs/src/components/productX/XTreeViewDemo.tsx

步骤 1 在自定义组件创建时沿 TreeItemContentProps 添加自定义属性

 const CustomContentChildContent = React.forwardRef(function CustomContent(
        props: TreeItemContentProps & { myCustomData?: string },
        ref,
    )

第二步使用 TreeItemProps 添加自定义属性

const CustomTreeItemChild = (
  props: TreeItemProps & {
    ContentProps?: { myCustomData?: string };
  },
) => <StyledTreeItem ContentComponent={CustomContentChildContent} {...props} />;

第三步

在您正在调用的组件中添加属性

<CustomTreeItemChild nodeId="3" label={item.name} ContentProps={{ myCustomData: 'anything-i-can-pass' }} />

【讨论】：