作为道具传递的本机组件无法访问道具？

Question

在我的理解中，React Native 组件有两种渲染方式

・在父母标签内传递

·作为父母的（？）道具传递

例如我有这个 FlatList 组件

<FlatList
      ListHeaderComponent={MiddleRightLabelComponent}
      ItemSeparatorComponent={SeparatorComponent}
      data={this.state.dataSource}
      keyExtractor={item => item.title}
      // renderItem={({ item }) => <Text>{item.key}</Text>}
      renderItem={this._renderItem}
      style={styles.flatlist}
      {...this.props}
/>
_renderItem({ item, index }) {
    console.warn(this.props);
    return (
      <ListItem
        id={item.id}
        // onPressItem={this.props.openEditTaskModal.bind(this, true)}
        // selected={!!this.state.selected.get(item.id)}
        title={item.title}
      />
    );
}

在这个 _renderItem 控制台.warn 中，当我尝试获取 (this.props) 时得到 (undefined)。

我需要将 props 传递给 ListItem 组件。

有什么想法吗？

Answer 1

_renderItem 正在创建自己的this 实例。在无状态组件（或未绑定到组件类的函数）中，您要直接引用函数参数

const _renderItem = (props) => {
    console.warn(props);
    return (
      <ListItem
        id={props.item.id}
        title={props.item.title}
      />
    );
}

OR（使用 es6 解构）：

const _renderItem = ({ item }) => {
    console.warn(item);
    return (
      <ListItem
        id={item.id}
        title={item.title}
      />
    );
}