将对象渲染为 React 组件

Question

在我的实现中，我传递了一个 reactelement（至少我是这么认为的）作为道具。

我想将此道具呈现为它自己的 React 组件，但浏览器抱怨它是一个对象。

澄清代码：

在父母中：

render() {
  return <SortableItem {...extraProps} item={React.cloneElement(item, extraProps)} />
}

item 属性包含我要在SortableItem 中渲染的元素

在 SortableItem 渲染中：

我想做这样的事情：

render() {
  return <props.item />
}

当我登录 props.item 时，我得到了这个：

Object {$$typeof: Symbol(react.element), key: "item-5", ref: null, props: 
Object, type: function…}
$$typeof:Symbol(react.element)
key:"item-5"
props:Object
ref:null
type:function _class()

我很困惑为什么 $$typeof 会说这确实是一个反应元素，但是 type 说它是一个 function _class() 并且当我登录/渲染时浏览器说它是一个对象。

这是我在SortableItem 中渲染<props.item /> 时在浏览器中遇到的错误

Fatal Exception:Uncaught Invariant Violation: Element type is invalid: 
expected a string (for built-in components) or a class/function (for 
composite components) but got: object. Check the render method of 
`SortableItem`.(reload cancelled)

Answer 1

试试这个，

方法 1

在父母中：

render() {
  return <SortableItem {...extraProps} item={<YourComponent />} />
}

在 SortableItem 渲染中：

render() {
  return {this.props.item}
}

方法二： 在父母中：

render() {
  return <SortableItem {...extraProps} >
     <YourComponent />
  </SortableItem>
}

在 SortableItem 渲染中：

render() {
  return {this.props.children}
}