TypeScript 错误：输入 '{children: ReactNode; }' 与动态 React 组件中的“IntrinsicAttributes”类型没有共同的属性

Question

我正在尝试在 TypeScript 中创建一个 React 组件，并且我想要一个动态组件来包装传递给我的组件的每个子节点。该组件称为

Slider

，我希望它的工作方式如下：

1. 子级被传递给组件

<Slider wrapper='div'>
    <p>Slide 1</p>
    <p>Slide 2</p>
    <p>Slide 3</p>
</Slider>

2. 组件逻辑将每个子节点包装在传递给

   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; }

与类型

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>
}

Answer 1

我认为你不能只用字符串替换组件。我觉得这个比较合适。

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>
}