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 console.warn中，当我尝试获取（this.props）时，我得到（未定义）。

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

有什么想法吗？

Answer 1

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

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}
      />
    );
}

反应原生组件传递为道具无法访问道具？

1 个答案: