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

发布时间：2020-12-15 05:05:40 所属栏目：百科来源：网络整理

导读：我很难理解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,{ mes

我很难理解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的预期函数的类型对象的prop组件无效.

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

当我在Component C的render函数中调用console.log Component A时,我得到一个函数但是
当我在Component C的render函数中调用console.log Component B时,我得到一个对象

我错过了什么？

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

为了在jsx中具体,在您的情况下,A是反应成分并且< A />是一种反应元素.如果你查看React.cloneElement文档,那么它期望一个元素作为第一个参数,但是在这里你传递一个组件.所以首先需要做的就是将一个元素传递给React.cloneElement

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

第二件事是Route组件需要一个react组件作为组件prop,但React.cloneElement返回一个react元素而不是组件(这意味着newComponent是一个元素,而不是组件).因此,您不能简单地从B.js文件中导出newComponent.您必须改为导出组件.为此,您可以创建一个类组件/无状态组件.所以你的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>)
  }
}

顺便说一句,在这种情况下,你甚至不需要克隆元素.你可以简单地从B.js返回一个组件来渲染A.这只是为了理解目的.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!