我正在尝试在 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 错误:
类型
与类型{ children: ReactNode; }
没有共同的属性。 ts(2559)IntrinsicAttributes
我查看了其他一些 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>
}
我认为你不能只用字符串替换组件。我觉得这个比较合适。
import { PropsWithChildren, ReactElement, ReactNode } from "react";
type SliderProps = PropsWithChildren<{
wrapper?: string | (() => ReactElement);
}>;
type SliderProps = PropsWithChildren<{
wrapper?: (() => ReactElement);
}>;
export default function Slider({
children,
wrapper: Wrapper ,
}: SliderProps) {
if(Wrapper) return <Wrapper>{children}</Wrapper>
return <div>{children}</div>; <Wrapper>
}