He visto este tipo de sintaxis en JS antes y yo estoy solo por curiosidad, cómo funciona. En el Reaccionar Nativo de google Docs para FlatList, un ejemplo de las llamadas renderItem. ¿Cómo funciona esto._renderItem saber que lo que los elemento de la lista con los que trabaja? Parece que elemento se está desestructurado, pero de qué objeto? Reaccionar FlatList renderItem

Dicho de otra manera: en Flatlist, otra forma de hacer esta misma llamada podría ser:

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

Es renderItem especiales prop donde {elemento} siempre será la desestructurado arg?

InformationsquelleAutor Julian | 2017-08-01

3 Comentarios

  1. 6

    datos prop – la necesidad de pasar de una matriz de datos para el FlatList a través de la data prop. Que está disponible en este.props.de datos.

    renderItem prop – Entonces usted desea procesar el contenido con el renderItem prop. La función se le pasa un único argumento, que es un objeto. Los datos que nos interesa es la item key así que usted puede utilizar desestructuración acceder desde dentro de la función. A continuación, devolver un componente de uso de los datos.

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

    añadir a lo que @Balasubramanian declaró, el renderItem puntos a la current item y puesto que usted está utilizando una List componente como un contenedor, a continuación, puede utilizar la » ListItem componente dentro de la renderItem función render la current item‘s de datos, así:

    renderItem={({ item, index }) => {
      return (
         <ListItem
            key={index}
            title={item.name}
            onPress={ () => this.assetSelected(item) }
          />
      );
    }
  3. 2
      <FlatList
                    data={['1', '2', '3', '4', '5', '6']}
                    renderItem={({ item }) => (
                      <Text>{ item }</Text>
                    )}
                />

    De salida
    1
    2
    3
    4
    5
    6

Dejar respuesta

Please enter your comment!
Please enter your name here