Componente en cascada de React Suite

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. El componente en cascada se utiliza como un cuadro de selección en cascada. Ayuda al usuario en una Selección única de datos con una estructura de relación jerárquica. Podemos usar el siguiente enfoque en ReactJS para usar el componente Cascader de React Suite.

Accesorios de cascada:

• apariencia: Se utiliza para la apariencia del componente.
• bloque: Se utiliza para bloquear una fila entera.
• childrenKey: se utiliza para establecer la clave de los niños en los datos.
• classPrefix: se utiliza para indicar el prefijo de la clase CSS del componente.
• cleanable: Se utiliza para indicar si la opción se puede vaciar o no.
• contenedor: Se utiliza para establecer el contenedor de renderizado.
• datos: Se utiliza para indicar los datos seleccionables.
• defaultOpen: se utiliza para indicar el valor predeterminado de la propiedad abierta.
• defaultValue: se utiliza para indicar el valor predeterminado.
• disabled: Se utiliza para indicar si el componente está deshabilitado o no.
• disabledItemValues: Se utiliza para deshabilitar opcionales.
• altura: Se utiliza para indicar la altura del menú.
• En línea: se utiliza para hacer que el menú se muestre directamente cuando se inicializa el componente.
• labelKey: Se utiliza para establecer las opciones para mostrar la ‘clave’ en ‘datos’.
• menuHeight: Se utiliza para establecer la altura del menú.
• menuWidth: Se utiliza para establecer el ancho del menú.
• onChange: es una función de devolución de llamada que se activa cuando cambia el valor.
• onClean: es una función de devolución de llamada que se activa cuando se limpia el valor.
• onClose: es una función de devolución de llamada que se activa en un evento de cierre.
• onEnter: es una función de devolución de llamada que se activa antes de que se produzca la transición de la superposición.
• onEntered: es una función de devolución de llamada que se activa después de que la superposición finaliza la transición.
• onEntering: es una función de devolución de llamada que se activa cuando la superposición comienza a hacer la transición.
• onExit: es una función de devolución de llamada que se activa justo antes de que la superposición termine.
• onExited: es una función de devolución de llamada que se activa después de que la superposición finaliza la transición.
• onExiting: es una función de devolución de llamada que se activa cuando la superposición comienza a salir.
• onOpen: es una función de devolución de llamada que se activa al abrir el componente.
• onSearch: Es una función de devolución de llamada para la búsqueda.
• onSelect: es una función de devolución de llamada que se activa al seleccionar una opción.
• marcador de posición: se utiliza para indicar el marcador de posición.
• colocación: Se utiliza para la colocación del componente.
• preventOverflow: se utiliza para evitar el desbordamiento de elementos flotantes.
• renderExtraFooter: se utiliza para el pie de página adicional de renderizado personalizado.
• renderMenu: se utiliza para personalizar la lista del menú de renderizado.
• renderMenuItem: se utiliza para los elementos del menú de renderizado personalizados
• renderValue: se utiliza para las opciones seleccionadas de renderización personalizadas.
• searchable: Se utiliza para indicar si se pueden buscar opciones o no.
• tamaño: se utiliza para indicar el tamaño del selector.
• toggleComponentClass: se puede usar para el elemento personalizado de este componente.
• valor: Se utiliza para denotar el valor (Controlado).
• valueKey: Se utiliza para establecer el valor de la opción ‘clave’ en ‘datos’.
• parentSelectable: se utiliza para hacer que el Node padre sea seleccionable.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

 

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install rsuite

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react'
import 'rsuite/dist/styles/rsuite-default.css';
import { Cascader } from 'rsuite';
  
export default function App() {
  
  // Sample Options
  const options = [
    {
      "label": "M.P",
      "value": 1,
      "children": [
        {
          "label": "Mhow",
          "value": 2
        },
        {
          "label": "Indore",
          "value": 3,
          "children": [
            {
              "label": "Vijay Nagar",
              "value": 4
            },
            {
              "label": "Rajiv Gandhi Square",
              "value": 5
            },
            {
              "label": "MR 10",
              "value": 6
            },
          ]
        },
      ]
    }
  ]
  
  return (
    <div style={{
      display: 'block', width: 600, paddingLeft: 30
    }}>
      <h4>React Suite Cascader Component</h4>
      <Cascader
        style={{ width: 300 }}
        placeholder="Select your Nearest Office"
        data={options}
      />
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://rsuitejs.com/components/cascader/