如何在 TypeScript 文件中接收任何元素作为 ReactChild?

san*_*eni 5 typescript reactjs

我正在使用一个库,其中包含<Carousel>我试图向其中添加一些子元素的元素,如下所示。

                               <Carousel>
                                    <div>
                                        <img
                                            style={{ width: 350, height: 197, borderRadius: 10 }}
                                            src={
                                                'https://resize.indiatvnews.com/en/resize/newbucket/1200_-/2020/05/salon-lockdown-1590854316.jpg'
                                            }
                                        ></img>
                                    </div>
                                </Carousel>
Run Code Online (Sandbox Code Playgroud)

但这给了我一个错误

类型“Element”不可分配给类型“(ReactChild[] & (boolean | ReactChild | ReactFragment | ReactPortal | null)) | 不明确的'。类型“ReactElement<any,any>”不可分配给类型“ReactChild[] & ReactPortal”。类型“ReactElement<any,any>”缺少类型“ReactChild[]”中的以下属性:length、pop、push、concat 等 28 个属性。TS2322

      144 |                             >
      145 |                                 <Carousel>
      146 |                                     <div>
          |                                     ^
      147 |                                         <img
      148 |                                             style={{ width: 350, height: 197, borderRadius: 10 }}
>     149 |                                             src={
Run Code Online (Sandbox Code Playgroud)

如何禁用该元素的 TypeScript 检查?

Vie*_*iet 3

Carousel接受元素列表。所以应该传递一个 Element 数组而不是一个 Element

{[
  <div>
    <img
      style={{ width: 350, height: 197, borderRadius: 10 }}
      src={
        "https://resize.indiatvnews.com/en/resize/newbucket/1200_-/2020/05/salon-lockdown-1590854316.jpg"
      }
    ></img>
  </div>,
]}
Run Code Online (Sandbox Code Playgroud)

  • 是的。您可以使用 javascript 库。但是你应该在文件“.d.ts”中声明这个包 (2认同)