gpt4 book ai didi

reactjs - React.CloneElement 返回一个对象而不是函数

转载 作者:行者123 更新时间:2023-12-03 13:28:41 25 4
gpt4 key购买 nike

我很难理解 React.cloneElement() 函数的行为

我的组件结构是这样的

A.js

export default class A extends React.Component {
render() {
return (<h1>{ this.props.message }</h1>)
}
}

B.js

import A from "./A"

const newComponent = React.cloneElement(A,{
message: "Hello World"
})

export default newComponent

C.js

import B from "./B"
import { BrowserRouter as Router, Route } from "react-router-dom"

// To Be very precise
export default class C extends React.Component {
render() {
return (
<Router>
<Route path="/" component={B} />
</Router>
)
}
}

但我收到此错误

提供给 Routeobject 类型的 prop component 无效,预期为 function

但是当我将组件 A 直接传递到 Route 组件时,它渲染得很好。

当我在组件C的渲染函数中使用console.log组件A时,我得到了一个函数,但是当我在组件C的渲染函数中使用console.log组件B时,我得到一个对象

我错过了什么?

最佳答案

首先你需要了解difference between React component and React element .两者实际上是不同的。

具体请参见 jsx ,就您而言,A是一个 react component<A />是一个 react element 。如果你看React.cloneElement文档,那么它期望 element作为第一个参数,但在这里您传递的是 component 。因此,您需要做的第一个更改是将一个元素传递给 React.cloneElement像这样

const newComponent = React.cloneElement(<A />,{
message: "Hello World"
})

第二件事是 Route组件期望 react componentcomponent prop ,但是React.cloneElement返回 react element而不是组件(这意味着 newComponent 是一个元素,而不是组件)。因此你不能简单地导出 newComponent来自B.js文件。您必须导出 component反而。为此,您可以创建一个 class component/stateless component 。所以你的B.js应该看起来像这样

// B.js
import A from "./A"

const newComponent = React.cloneElement(<A />, {
message: "Hello World"
})

export default class B extends React.Component {
render() {
return (<div>{newComponent}</div>)
}
}

顺便说一下,你甚至不需要cloneElement就你的情况而言。您只需从 B.js 返回一个组件即可渲染 A 。这只是为了理解目的。

关于reactjs - React.CloneElement 返回一个对象而不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47493812/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com