javascript - 如何使用自定义单元格组件在 React Native 中实现 ListView？

Question

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

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

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

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 开发控制台中收到以下错误:

ExceptionsManager.js:76 Warning:

React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of StaticRenderer.

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

Answer 1

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

这一行

import { JobDetailCell } from './JobDetailCell'

相当于这一行:

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

由于您导出了组件本身，它变得未定义，它没有名为 JobDetailCell 的字段。

这是导入组件的方式:

import JobDetailCell from './JobDetailCell'