將渲染對象渲染爲React組件

Question

在我的實現中，我將重新渲染（至少這是我認爲的）作爲道具。

我想渲染這個道具，因爲它是自己的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會說這是一個確實的反應的元素，但類型說，這是一個function _class()當我記錄/渲染瀏覽器說它是一個對象。

這是錯誤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

試試這個渲染<props.item />當我在瀏覽器中得到，

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