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

Question

我很难理解 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>
         )
     }
 }

但我收到此错误

提供给 Route 的 object 类型的 prop component 无效，预期为 function。

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

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

我错过了什么？

Answer 1

首先你需要了解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 component如component 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 。这只是为了理解目的。