オブジェクトをオブジェクトとして返す

Question

私の実装では、反応要素（少なくとも私が思うもの）を小道具として渡します。

この小道具を自分のリアクションコンポーネントとしてレンダリングしたいと思いますが、ブラウザがオブジェクトであると不平を言います。

コードは、明確にする：

：

は

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