反应平面列表渲染项

Posted

技术标签:

【中文标题】反应平面列表渲染项【英文标题】:React FlatList renderItem 【发布时间】:2018-01-07 19:42:29 【问题描述】:

我以前在 JS 中看到过这种语法,我只是好奇它是如何工作的。在React Native Docs for FlatList 中,一个示例调用了renderItem。 this._renderItem 如何知道它正在使用的单个列表项?看起来项目正在被解构,但是来自什么对象?

_renderItem = (item) => (
    <MyListItem
        id=item.id
        onPressItem=this._onPressItem
        selected=!!this.state.selected.get(item.id)
        title=item.title
    />
);

render() 
    return (
        <FlatList
            data=this.props.data
            extraData=this.state
            keyExtractor=this._keyExtractor
            renderItem=this._renderItem
        />
    );

换一种说法:在 FlatList 中,进行相同调用的另一种方式可能是:

<FlatList <other props> renderItem=(item) => (<MyListItem ....) />

renderItem 是一些特殊的道具,其中 item 将始终是解构的 arg 吗?

【问题讨论】:

【参考方案1】:

data prop - 需要通过data prop 将一组数据传递给FlatList。这可以在 this.props.data 上找到。

renderItem 属性 - 然后你想用renderItem 属性渲染内容。该函数被传递一个参数,它是一个对象。您感兴趣的数据位于 item key 上,因此您可以使用解构从函数内访问这些数据。然后使用该数据返回一个组件。

render() 
 return (
      <FlatList
        data=this.state.data
        renderItem=( item ) => (
          // return a component using that data
        )
      />
 );

【讨论】:

【参考方案2】:
<FlatList
    data=['1', '2', '3', '4', '5', '6']
    renderItem=( item ) => (
        <Text> item </Text>
    )
/>

输出 1 2 3 4 5 6

【讨论】:

【参考方案3】:
import  places  from '../data/DataArray';

export const Home = (props) => 
    const renderPlace = ( item ) => (
        <TouchableOpacity onPress=() => props.navigation.navigate('SingleTour')>
            <Text style=styles.item>item.name</Text>
        </TouchableOpacity>
    );
    return (
        <View style= flex: 1, alignItems: 'center', justifyContent: 'center' >
            <FlatList
                data=places
                renderItem=
                    renderPlace
                
            />
        </View>
    );

【讨论】:

【参考方案4】:
 <ListItem
    data=this.state.data
    key=(item,index)=>index.toString()
    renderItem=( item ) => <YourComponent item=item> 
  />

【讨论】:

应该是&lt;YourComponent item=item /&gt;,最后忘了/&gt;【参考方案5】:

除了@Balasubramanian 所说的,renderItem 指向current item,并且由于您使用List 组件作为包装器,因此您还可以在renderItem 函数中使用“ListItem”组件来rendercurrent item的数据,像这样:

renderItem=( item, index ) => 
  return (
     <ListItem
        key=index
        title=item.name
        onPress= () => this.assetSelected(item) 
      />
  );

【讨论】:

以上是关于反应平面列表渲染项的主要内容,如果未能解决你的问题,请参考以下文章

使用 Redux 添加更多数据时,带有分页结果的平面列表会导致重新渲染

在我滚动之前,react-virtualized 列表项不会使用更改的道具重新渲染

如何重新渲染平面列表?

父平面列表项之间的反应原生显示平面列表组件

反应原生平面列表如何强制列表项具有相同的高度?

滚动列表时反应本机 VirtualizedList 重新渲染