我正在尝试在 TypeScript 中创建一个 React 组件,并且我想要一个动态组件来包装传递给我的组件的每个子节点。该组件被调用Slider
,我希望它的工作方式如下:
- 子级被传递给组件
<Slider wrapper='div'>
<p>Slide 1</p>
<p>Slide 2</p>
<p>Slide 3</p>
</Slider>
- 组件逻辑将每个子节点包装在传递给
Slider
组件的任何组件/字符串中。如果您通过:
<Slider wrapper='div'>...</Slider>
你会得到:
<div>
<p>Slide 1</p>
</div>
如果你通过了:
<Slider wrapper={MyComponent}>...</Slider>
你会得到:
<MyComponent>
<p>Slide 1</p>
</MyComponent>
我希望能够接受组件内的所有 props,然后使用组件内的逻辑渲染所有内容,但我不断收到 Typescript 错误:
Type
{ children: ReactNode; }
与 type 没有共同的属性IntrinsicAttributes
。TS(2559)
我查看了其他一些 Stack Overflow 问题和一些 Github 问题,但没有找到可以帮助解决我的问题的解决方案。我当然可能想得太多或掩盖了一些显而易见的事情,所以无论你能提供什么帮助,我都愿意听!
这是到目前为止我的组件代码:
import { PropsWithChildren, ReactElement, ReactNode } from "react";
type SliderProps = PropsWithChildren<{
wrapper?: string | (() => ReactElement);
}>;
export default function Slider({
children,
wrapper: Wrapper = "div",
}: SliderProps) {
return <Wrapper>{children}</Wrapper>; // error on this line under <Wrapper>
}
Wrapper
TypeScript 期望wrapper prop 是一个引用 HTML 元素或 React 组件类型的字符串,但当您尝试将其用作组件时,它无法推断出正确的类型。要解决此问题,您可以将wrapper prop 定义为 type
React.ElementType
,这是 React 提供的内置类型,用于表示可以渲染的组件。以下是调整
SliderProps
类型和滑块组件的方法:您只需要使用比字符串更具体的类型,以便编译器知道它仅限于有效的 HTML 标记名称:
请注意,Typescript
JSX
命名空间是环境变量,只要导入了 React 本身,就不必导入它。操场
我不认为你可以只用一个字符串替换一个组件。我相信这是更合适的。