Reaccionar nativa - asignando estado a const

Question

Estoy comenzando con react native, y cuando uso una biblioteca llamada react native paper, me encuentro con una declaración donde se asigna el estado a un const como se muestra a continuación.

import * as React from 'react';
import { Searchbar } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    firstQuery: '',
  };

  render() {
    const { firstQuery } = this.state;
    return (
      <Searchbar
        placeholder="Search"
        onChangeText={query => { this.setState({ firstQuery: query }); }}
        value={firstQuery}
      />
    );
  }
}

Al comenzar el método 'Renderizar', podría ver const {firstQuery} = this.state; ¿Podría alguien explicar por qué el estado se está asignando a una constante llamada 'firstQuery', e incluso si tiene una razón, cómo la asignación correlacionará correctamente la propiedad 'firstQuery' dentro del objeto de estado con la constante?

Gracias por adelantado. El código de muestra es de https://callstack.github.io/react -native-paper / searchbar.html # value

javascript reactjs react-native react-native-paper

0

Aby 30 dic. 2019 a las 18:41

Answer 1

Esa sintaxis no es React ni React Native. Es solo la sintaxis de Javascript, llamada desestructuración.

const { firstQuery } = this.state;

Es equivalente a

const firstQuery = this.state.firstQuery;

Solo una sintaxis de acceso directo de mano corta, ¿ves 2 firstQuery s ? La gente simplemente no quiere duplicación en el código, así que lo inventaron.

Vea el fragmento vanilla javascript a continuación:

const object = {
  name: 'Aby',
  age: 100,
}

const { name, age } = object;
// instead of 
// const name = object.name;

console.log(name, age);
console.log(object.name, object.age);

//=========================================
// imagine:
const obj = {
  veryLongPropertyNameToType: 420
}

const { veryLongPropertyNameToType } = obj;
// instead of
// const veryLongPropertyNameToType = obj.veryLongPropertyNameToType;

4

Loi Nguyen Huynh 30 dic. 2019 a las 15:57

Answer 2

Como otra respuesta mencionada, es solo la sintaxis de JavaScript, también conocida como desestructuración. Si se siente confundido y desea utilizar la sintaxis JavaScript "vainilla", puede consultar a continuación.

import * as React from 'react';
import { Searchbar } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    firstQuery: '',
  };

  render() {
    return (
      <Searchbar
        placeholder="Search"
        onChangeText={query => { this.setState({ firstQuery: query }); }}
        value={this.state.firstQuery} // <<<<<<<<<<< LOOK HERE
      />
    );
  }
}

1

Isaac 30 dic. 2019 a las 16:09

Reaccionar nativa - asignando estado a const

2 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript