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>
         )
     }
 }

但是我得到了这个错误

提供给component类型的无效道具,预期.objectRoutefunction

但是当我将Component A直接传递到Route组件中时,它呈现得很好.

当我在console.logComponent A的渲染函数内部组件时C,我得到一个函数但是当我在console.logComponent B的渲染函数内部组件时C,我得到一个对象

我错过了什么？

Answer 1

首先,你需要了解的差异React component和React element.两者其实是不同的.

具体来说jsx,在你的情况下,A是一种反应component,<A />是一种反应element.如果你看看React.cloneElement文档,那么它期望element作为第一个参数,但在这里你传递了一个component.所以首先要做的就是将元素传递给React.cloneElement这样

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

第二件事是Route组件需要一个react componentas 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.这只是为了理解目的.