Reactjs Typescript如何扩展本机HTML元素？

假设我想创建一个自定义div组件调用MyDiv，并带有其他属性，例如

interface MyDivProps {
  marginX: string;
  marginY: string;
}

但我仍然希望对常规

htmldevelment

进行所有类型检查，因此我想要的实际上是：

interface MyDivProps implements JSX.IntrinsicElement.div {
      marginX: string;
      marginY: string;
    }

（我使用

JSX.intrinsiceelement.div

而不是

htmldevelment

，因为它有额外的React div属性，例如

ref

）

显然，这是行不通的，因为接口不能实现另一个接口，而且内部元素也没有公开

---

正确的方法是什么？

您要查找的语法是：

type DivProps = JSX.IntrinsicElements["div"];
interface MyDivProps extends DivProps {
  marginX: string;
  marginY: string;
}

---

（TypeScript有一个限制，即接口只能扩展虚线名称，因此您必须为

JSX.intrinsiceelements[“div”]

定义一个类型别名，然后才能扩展它。）

但这是正确的方法吗？我还没见过其他地方这么做你自己得出结论。有一个类似的场景，但我喜欢您直接引用

JSX.intrinsiceelements[“div”]

的想法，因为它的定义可能会在React的未来版本中更改。