将对象渲染为 React 组件

Posted 2023-02-23

【中文标题】将对象渲染为 React 组件

【英文标题】：Render object as React Component

【发布时间】：2017-09-20 21:37:25

【问题描述】：

在我的实现中，我传递了一个 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)

【参考方案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

【讨论】：

谢谢。我如何将React.cloneElement(item, extraProps) 变成<YourComponent />？

你克隆的到底是什么，能分享一下代码吗？ @skrln

在父组件中 <ul className='fc-list-group'> items.map((item, index) => const extraProps = disabled: !sortable, key: 'item-' + index, index: index, ; return <SortableItem ...extraProps item=<React.cloneElement(item, extraProps) /> /> ) </ul> 其中items 在地图中是这个父组件的原始子组件。我这样做是因为我需要这个父级的一些道具（可排序）以及一些额外的道具（键和索引）。

你的组件类似于 ABC

它现在可以工作了：const SortableItem = (props) => return props.item; //instead of <props.item /> ; 因为 props.item 实际上已经是一个反应元素。我很困惑试图把它变成一个组件。谢谢。

【参考方案2】：

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

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

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