Question

我正在开发一个React-Native组件，该组件应该用作“选择”选择器，并显示一个FlatList。我希望FlatList的renderItem函数是可自定义的，实质上，我想将自定义的渲染函数传递给SelectPicker组件，该组件将负责呈现列表项。

在StandardPicker组件中，我有一个呈现函数，如下所示：

render() {
  const { range } = this.props;
  return (
    <View style={styles.modal}>
      <FlatList
        data={range}
        renderItem={this.renderListItem}
      />
    </View>
  );
}

和renderListItem函数如下所示

renderListItem({ item, index }) {
  const { onSelectItem, renderItem } = this.props;

  const renderedItem = renderItem ? (
    renderItem()
  ) : null

  return (
    <TouchableNative
      key={index}
      onPress={() => {
        onSelectItem(index);
      }}
    >
      {renderedItem}
    </TouchableNative>
  );
}

现在在另一个组件中，我正在渲染StandardPicker并像这样传递一个渲染函数

renderCustomItem() {
  return (
    <View>
      <Text>Testing</Text>
      <Text>Test 2</Text>
    </View>
  );
}

<StandardPicker
  range={this.listItems}
  onSelectItem={item=>
    this.setState({ selectedItem: item})
  }
  renderItem={this.renderCustomItem}
/>

但是我最终遇到错误Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

我是否缺少某些东西，或者在React-Native中无法做到？

Answer 1

感觉您正在使此操作变得不必要的复杂，您可以将渲染函数绝对传递给Component，但是仅传递主体要容易得多，现在出现的错误似乎是某种导入/ spelling错误，因为您正在使用的对象之一实际上就是代码中所说的undefined，现在我需要更好地查看您的代码以准确了解发生的地方，但是无论哪种方式，您都可以放心使用缩短这样的功能：

renderListItem({ item, index }) {
  const { onSelectItem, renderItem } = this.props;

  return (
    <TouchableNative
      key={index}
      onPress={() => {
        onSelectItem(index);
      }}
    >
      {renderItem}
    </TouchableNative>
  );
}

就像未定义一样，JSX不会以任何方式呈现任何内容。

在React Native中使用渲染道具

1 个答案: