Header Ads Widget

Ticker

6/recent/ticker-posts

Ejemplo de longitud de obtención de matriz de estado de reacción

 En este artículo de consejos rápidos, veremos cómo obtener la longitud de una matriz o matriz de estado en React.

React es una biblioteca de JavaScript para renderizar interfaces de usuario, por lo tanto, simplemente se ocupa de la IU y no proporciona sus propias utilidades para manejar matrices o tareas similares. Como resultado, simplemente necesita usar los métodos y API integrados de JavaScript.

Longitud de matriz de JavaScript por ejemplo en React

En este ejemplo, veremos cómo obtener la longitud de una matriz en React y JavaScript.

JavaScript ya proporciona muchos métodos incorporados para obtener la longitud de una matriz, veamos cómo usar en un ejemplo de React.

La propiedad de longitud de un objeto que es una instancia del tipo Array establece o devuelve el número de elementos de esa matriz. El valor es un entero de 32 bits sin signo que siempre es numéricamente mayor que el índice más alto de la matriz. Fuente

Cree un index.jsarchivo y agregue el siguiente código:

import React from 'react'

class App extends React.Component {

    render(){
        const array = ["React","is", "awesome", "!"];
        const length = array.length;
        return(
            <div>
                <p>Array length is { length }.</p>
            </div>
        )
    }

}

ReactDOM.render(<App />, document.getElementById("root"));

En el render()método, simplemente definimos una matriz de JavaScript y luego obtenemos la longitud de la matriz usando el Array.lengthmétodo. Finalmente, devolvemos un marcado JSX para reproducir la longitud de la matriz.

Debe importar React y ReactDOM en su proyecto y usar ReactDOM para montar el componente en el DOM:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

De la misma manera, puede obtener la longitud de la matriz en el estado React de la siguiente manera:

class App extends React.Component {
  state = {
    array: ["Hello", "React"]
  };


  render() {
    return (
      <div>
        <p>React State Array Length: {this.state.array.length}</p>        
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Conclusión

En este ejemplo rápido, hemos visto cómo utilizar el Array.lengthmétodo para obtener la longitud de una matriz local o matriz de estado y representar el resultado en el DOM.

Publicar un comentario

0 Comentarios