我正在尝试在 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>
}