Componente React Suite TreePicker

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 TreePicker permite al usuario proporcionar un selector único de árbol. Los usuarios pueden seleccionar un valor del menú desplegable en forma de jerarquía de árbol. Podemos usar el siguiente enfoque en ReactJS para usar el componente TreePicker de React Suite.

Accesorios TreePicker:

• apariencia: Se utiliza para la apariencia del componente.
• bloque: Se utiliza para bloquear una fila entera.
• childrenKey: Se utiliza para denotar el nombre de la propiedad Children de la estructura de datos del árbol.
• 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.
• defaultExpandAll: Se utiliza para expandir todos los Nodes por defecto.
• defaultExpandItemValues: se utiliza para establecer el valor del Node expandido predeterminado.
• Se utiliza para abrir por defecto.
• 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.
• expandItemValues: Se utiliza para establecer el valor del Node expandido (controlado).
• altura: Se utiliza para indicar la altura del menú.
• labelKey: Se utiliza para establecer las opciones para mostrar la ‘clave’ en ‘datos’.
• menuClassName: se utiliza para indicar una clase CSS para aplicar al Node Menú DOM.
• menuStyle: se utiliza para denotar un estilo para aplicar al Node Menú DOM.
• 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.
• onExpand: es una función de devolución de llamada que se activa cuando se muestra el Node del árbol.
• 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.
• abierto: Es una función de devolución de llamada que se activa en el evento abierto (Controlado).
• marcador de posición: se utiliza para indicar el marcador de posición.
• colocación: Se utiliza para la colocación del componente.
• renderExtraFooter: se utiliza para el pie de página adicional de renderizado personalizado.
• renderTreeIcon: se utiliza para indicar el icono de renderizado personalizado.
• renderTreeNode: se utiliza para indicar el Node del árbol de renderizado personalizado.
• renderValue: se utiliza para las opciones seleccionadas de renderización personalizadas.
• searchBy: Se utiliza para las reglas de búsqueda 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’.
• virtualizado: Se utiliza para indicar si se utiliza o no Lista Virtualizada.

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 { TreePicker } from 'rsuite';
  
export default function App() {
  
  // Sample Options
  const options = [
    {
      "label": "Madhya Pradesh",
      "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 TreePicker Component</h4>
      <TreePicker
        style={{ width: 300 }}
        defaultExpandAll
        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/tree-picker/