Question

我正在运行Next.js，React，Ts项目。

我已将React组件动态导入到我的页面中，并且ssr设置为false，因为该组件包含对window的引用，并且这些对window的引用将抛出ReferenceError: window is not defined。

const myComponent = dynamic(
  () => import('../components/myComponent').then(mod => mod.myComponent),
  { 
    ssr: false ,
  }
)

export default function Home() {
return (
    <div>
      <Head>
        <title>My site</title>
      </Head>

      <main>
          <myComponent name="Damian" age={27} />
      </main>
    </div>
  )
}

但是，当我在页面中调用它时，无法将其属性传递给它，并且出现错误：

Type '{ name: string; age: number; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.

我觉得我肯定会丢失一些东西。

Answer 1

您可以简单地克隆您的组件并可以传递您选择的道具。

let component = myComponent;
let props = { name: "Damian" age: 27 };

return (
    <div>
      <Head>
        <title>My site</title>
      </Head>

      <main>
        {React.cloneElement(component, props)}
      </main>
    </div>
  )

动态导入道具后如何将道具传递给React组件？

1 个答案: