React Native - 是否可以将道具中的组件传递给其他组件？答案

【问题标题】：React Native - Is it possible to pass a Component in props to an other Component?React Native - 是否可以将道具中的组件传递给其他组件？
【发布时间】：2016-02-13 22:12:56
【问题描述】：

这个想法是将 DetailView 作为 props 传递给 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 但无法正常渲染

错误是：

错误：不变违规：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。检查StaticRenderer的渲染方法。

【问题讨论】：

为什么不直接在ItemsList 中导入ItemDetail ？
这是一个简单的解决方案。但我想保持 ItemList 通用，并且对要渲染的孩子一无所知。

标签： android ios listview mobile react-native

【解决方案1】：

您以错误的方式将组件作为道具传递。您需要改为以下方式。

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

【讨论】：