React Native - 是否可以將道具中的組件傳遞給其他組件？

Question

的想法是要通過的DetailView作爲道具到ListView組件爲：

//MainPage.js 
... 
import ItemsList from './ItemList'; 
import ItemDetail from './ItemDetail'; 

var items = []; 
... 
export default class extends React.Component { 
render() { 
    return (
     <View style={{flex: 1}}> 
     <ItemsList 
      ItemDetail=<ItemDetail/> 
      items=items 
     /> 
     </View> 
    ) 
} 

並且列表

//ItemsList.js 
... 
... 
export default class extends React.Component { 

    constructor(props) { 
    super(props); 
    var ds = new ListView.DataSource({ 
     rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     dataSource: ds.cloneWithRows(this.props.items) 
    } 
    } 

    render() { 
    const { ItemDetail } = this.props.ItemDetail 

    return (
     <View style={{flex:1}}> 
     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={(rowData, rowID) => <ItemDetail item={rowData} />} 
     /> 
     </View> 
    ) 
    } 
} 

的想法是隻寫一個通用ITEMLIST。

日誌顯示this.props.ItemDetail的軌跡作爲ReactElement但無法呈現正常

的錯誤是：

錯誤：違反不變：元素類型無效：預期字符串（建-in組件）或類/函數（用於複合組件），但得到：未定義。檢查StaticRenderer的渲染方法。

Answer 1

你以錯誤的方式傳遞組件作爲道具。您需要按照以下方式進行操作。

export default class extends React.Component { 
render() { 
    return (
     <View style={{flex: 1}}> 
     <ItemsList 
      ItemDetail={ItemDetail} 
      items=items 
     /> 
     </View> 
    ) 
}