在 React Native 中使用渲染道具

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

感觉你比你需要的更复杂，你绝对可以将渲染函数传递给组件，但只传递主体要容易得多，现在你得到的错误似乎是某种导入/拼写错误，因为你正在使用的对象之一实际上是代码所说， undefined现在我需要更好地查看您的代码以准确找出它发生的位置，但无论哪种方式，您都可以像这样随意缩短函数：

renderListItem({ item, index }) {
  const { onSelectItem, renderItem } = this.props;
  return (
    <TouchableNative
      key={index}
      onPress={() => {
        onSelectItem(index);
      }}
    >
      {renderItem}
    </TouchableNative>
  );
}

好像它是未定义的，JSX 不会在那里渲染任何内容。