如何使用自定义单元组件在ReactNative中实现ListView？

Question

我正在构建一个ReactNative + Redux应用程序并使用ListView组件。

在ListView _renderRow()中，我想返回自己的单元组件（称为JobDetailCell ，它只从管理ListView的组件（称为JobsRootComponent ）接收其props的数据。

到目前为止，我想出了以下代码：

JobsRootComponent.js

import React, {
  Component,
  StyleSheet,
  Text,
  View,
  ListView,
  ActivityIndicatorIOS,
  NavigatorIOS,
  TouchableHighlight
} from 'react-native'

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { fetchJobs } from '../actions/Actions'
import { JobDetailCell } from './JobDetailCell'
import { JobDetailComponent } from './JobDetailComponent'

class JobsRootComponent extends Component {

  ...

  _renderRow(rowData) {
      const title = rowData.title
      const subtitle = rowData.by
      return (
        <JobDetailCell title={title} subtitle={subtitle}></JobDetailCell>
      )
  }

  ...

  render() {
    return (
        <ListView
          style={styles.container}
          dataSource={this.props.dataSource}
          renderRow={this._renderRow}
        />
      )
  }

  ...

}

JobDetailCell.js

import React, {
  Component,
  StyleSheet,
  Text,
  View,
} from 'react-native'

export default class JobDetailCell extends Component {

  render() {
    return (
      <View style={styles.cellContainer}>
        <Text style={styles.cellTitle}>{this.props.title}</Text>
        <Text style={styles.cellSubtitle}>{this.props.subtitle}</Text>
      </View>
    )
  }

}

但是，当我运行应用程序时，我在chrome dev控制台中收到以下错误：

ExceptionsManager.js：76警告：

React.createElement ：type不应为null ， undefined ， boolean或number 。 它应该是一个string （对于DOM元素）或一个ReactClass （对于复合组件）。 检查StaticRenderer的render方法。

谁能告诉我这里做错了什么？

Answer 1

问题是您以错误的方式导入组件。

这条线

import { JobDetailCell } from './JobDetailCell'

相当于这一行：

var JobDetailCell = require('./JobDetailCell').JobDetailCell;

由于您导出了组件本身（没有名为JobDetailCell字段），因此未定义。

这是您应该如何导入组件：

import JobDetailCell from './JobDetailCell'