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