Question

我们的想法是将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但无法正确呈现

错误是：

错误：不变违规：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined。检查StaticRenderer的呈现方法。

Answer 1

你以错误的方式传递组件作为道具。你需要以下面的方式去做。

b_

React Native - 是否可以将props中的Component传递给另一个Component？

1 个答案: