Question

我正在构建一个自定义组件，我想将元素名称作为道具传递给该组件，例如div或p；一个HTMLElement

要注意的是它必须是块或内联元素

export const MyComponent = props => {
  const currentNode = useRef()
  const { tag: Comp } = props
  return <Comp ref={currentNode}>Strawberry Kisses!</Comp>
}

如您所见，我正在分解prop以获得tag值（Component）并将其作为元素传递。

当前，下面的界面引发错误

Type '{ ref: MutableRefObject<undefined>; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'ref' does not exist on type 'IntrinsicAttributes'.ts(2322)

interface MyProps extends React.ClassAttributes<MyComponent> {
  tag: string;
}

我需要基本检查if (tag == HTMLElement && tag === JSX.IntrinsicElements) { return 'this is the correct type and allow it' }

感谢您对任何指导的帮助。

Answer 1

据我所知，您的错误与您的问题无关。

要纠正错误，您需要执行<Comp ref={currentNode.current}>

您可能会遇到的下一个错误是您没有将标签prop传递给子组件。

要真正回答您的问题，我认为HTML标记的所有名称都没有内置的枚举或类型，因此您必须自己定义它，尤其是因为似乎您想要更多的东西具体的。

JSX React'div是什么类型？ p'？

1 个答案: