如何解决动态导入道具后如何将道具传递给React组件?
我正在运行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; }'.
我觉得我肯定会丢失一些东西。
解决方法
您可以简单地克隆您的组件并可以传递您选择的道具。
let component = myComponent;
let props = { name: "Damian" age: 27 };
return (
<div>
<Head>
<title>My site</title>
</Head>
<main>
{React.cloneElement(component,props)}
</main>
</div>
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。