提问人：Willy Moore 提问时间：11/11/2023 最后编辑：Willy Moore 更新时间：11/11/2023 访问量：35
如何将 React 子项的类型限制为 span 元素
How do I restrict type of React children to be a span element
问：
我当前的组件如下所示：
interface MyComponentProps {
children: HTMLSpanElement
}
...
export default function MyComponent({children}: MyComponentProps){
...
return (
<div>
{children}
</div>
)
}
我希望我的孩子只允许一个跨度，没有其他元素。
问题是，我在下面得到一个错误告诉我{children}Type HTMLSpanElement is not assignable to ReactNode
似乎任何HTMLElement都会发生这种情况，从而给出错误Type HTMLElement is not assignable to ReactNode
我很好奇是否有一种方法可以正确处理这种情况，或者其他一些方法想要设置一个实例，在其中我键入 check 以仅将 span 元素作为 React 元素的子节点传递。
答：
0赞
nik-kita
11/11/2023
#1
import React from 'react';
interface MyComponentProps extends React.PropsWithChildren<HTMLSpanElement> {
hello: 'world' // if needed some extra props
};
export default function MyComponent({children}: MyComponentProps){
return (
<div>
{children}
</div>
)
}
_or使用代替typeinterface
type MyComponentProps = React.PropsWithChildren<HTMLSpanElement> & {
hello: 'world'
};
-1赞
봊Ì'ɱ Јìԥ
11/11/2023
#2
您可以将 type 与实用程序类型一起使用。下面是一个示例，说明如何将 prop 限制为仅接受元素：React's React.ReactElementReact.ReactElementPropschildrenspan
import React, { ReactElement, ReactElementProps } from 'react';
interface MyComponentProps {
children: ReactElement<ReactElementProps<'span'>>;
}
export default function MyComponent({ children }: MyComponentProps) {
return (
<div>
{children}
</div>
);
}
现在，当您使用 TypeScript 时，将强制只有元素（或具有兼容道具的组件）才能作为子元素传递。如果尝试传递任何其他元素或组件，TypeScript 将引发类型错误。MyComponentspanspan
喜欢这个：
import React from 'react';
import MyComponent from './MyComponent';
function App() {
return (
<MyComponent>
<span>Hello, World!</span>
</MyComponent>
);
}
评论