我很难理解 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>
)
}
}
但是我收到了这个错误
无效的component
属性,类型为object
,提供给Route
组件,期望为function
类型。
但是当我直接将组件A
传递给Route
组件时,它可以正常渲染。
当我在组件C
的渲染函数内部使用console.log
输出组件A
时,我得到的是一个函数,但是当我在组件C
的渲染函数内部使用console.log
输出组件B
时,我得到的是一个对象
我错过了什么?
cloneElement
? - HeartbitHOC
来实现这个目的。 - HeartbitComponent B
设为 HOC - besrabasantCloneElement
究竟是什么?我看到过使用该函数来克隆 React 组件的children
的示例。@SaeidAlidadi - besrabasant