Question

在我的实现中，我传递了一个重新元素（至少就是我认为的那样）作为道具。

我想渲染这个道具，因为它是自己的React Component，但是浏览器抱怨它是一个对象。

代码澄清：

在父母：

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会说这确实是一个反应元素，但是类型说它是function _class()，当我记录/渲染时，浏览器说它是一个对象。

这是我在<props.item />

中呈现SortableItem时在浏览器中遇到的错误

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

方法2： 在父母：

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

在SortableItem渲染中：

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

Answer 2

对此的答案是，您在虚拟DOM中操作的每个逻辑块都需要包装在单个容器元素中。您可以插入和删除组件列表，但需要将它们包装在单个元素中。如果您返回

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

你会没事的。 Vue和Angular为此内置了模板元素。我通常在React中为此目的制作某种模板组件，它只是一个没有边框或填充的div，可用于包装元素列表。

将对象渲染为React Component

2 个答案: