动态导入后如何将 props 传递给 React 组件？答案

【问题标题】：How do you pass props to a React component after importing it dynamically?动态导入后如何将 props 传递给 React 组件？
【发布时间】：2020-08-19 14:22:02
【问题描述】：

我正在运行 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; }'.

我觉得我肯定错过了什么。

【问题讨论】：

标签： javascript reactjs typescript next.js

【解决方案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>
  )

【讨论】：

“ComponentType”类型的参数不可分配给“ReactElement”类型的参数
可以分享一下代码沙箱链接，这样可以得到清晰的画面吗？
我看看能不能设置一下，我不能分享确切的代码