React Suite es una biblioteca front-end diseñada para la plataforma intermedia y los productos back-end. El componente React Suite Cascader se utiliza como una única selección de datos con una estructura de relación jerárquica.
Sintaxis:
<Cascader renderMenu={}
renderMenuItem={}
renderValue={}
/>
Requisito previo:
- Introducción e Instalación reactJS
- Componente en cascada de React Suite.
Creación de la aplicación React y la instalación del módulo:
Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o instálelo localmente con npm i create-react-app .
npm create-react-app project
Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.
cd project
Paso 3: Ahora instala la dependencia usando el siguiente comando:
npm install rsuite
Estructura del proyecto: Se verá así:
Ejemplo 1: estamos importando el componente Cascader desde » rsuite «, LocationIcon desde «@rsuite/icons/Location» y aplicando los estilos predeterminados de los componentes que estamos importando «rsuite/dist/rsuite.min.css» .
Al componente Cascader, estamos pasando una lista llamada datos que contiene los nombres de los países a la propiedad de datos del componente y algunos estilos en línea. Estamos creando una lista nombrada como un nombre. Ahora, al renderMenuItem , le estamos pasando la etiqueta en las etiquetas <em> , para el renderValue , mostramos el icono de ubicación junto con el valor, y para el renderMenu , mostramos los nombres del nombre de la lista en cualquier índice, representado por la capa. (0,1,2) y luego mostrando el menú.
App.js
import { Cascader } from "rsuite";
import "rsuite/dist/rsuite.min.css";
import LocationIcon from "@rsuite/icons/Location";
function App() {
const countries = [
{
label: "India",
value: "India",
children: [
{
label: "Haryana",
value: "Haryana",
},
{
label: "Assam",
value: "Assam",
children: [
{
label: "Darrang",
value: "Darrang",
},
{
label: "Dhemaji",
value: "Dhemaji",
},
],
},
{
label: "West Bengal",
value: "West Bengal",
children: [
{
label: "Hooghly",
value: "Hooghly",
},
{
label: "Darjeeling",
value: "Darjeeling",
},
],
},
{
label: "Nagaland",
value: "Nagaland",
},
],
},
{
label: "Germany",
value: "Germany",
},
{
label: "Sri Lanka",
value: "Sri Lanka",
},
];
const name = ["Country", "State", "District"];
return (
<div className="App">
<h4> React Suite Cascader Custom options</h4>
<Cascader
data={countries}
style={{ marginLeft: 80, marginTop: 10 }}
renderMenuItem={(label) => {
return (
<div>
<em>{label}</em>
</div>
);
}}
renderValue={(value) => {
return (
<b>
<LocationIcon />
{value}
</b>
);
}}
renderMenu={(children, menu, parentNode, layer) => {
return (
<div>
<div
style={{
background: "green",
border: "2px solid #34382e",
padding: "4px",
color: "white",
textAlign: "center",
}}
>
{name[layer]}
</div>
{menu}
</div>
);
}}
/>
</div>
);
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
Ejemplo 2: estamos importando el componente Cascader de «rsuite», LocationIcon de «@rsuite/icons/Location», CheckIcon de «@rsuite/icons/Check», PageEndIcon de «@rsuite/icons/PageEnd» y aplicando el valor predeterminado estilos de los componentes que estamos importando “rsuite/dist/rsuite.min.css”.
Al componente Cascader, estamos pasando una lista llamada datos que contiene los nombres de los países a la propiedad de datos del componente y algunos estilos en línea. Ahora, al renderMenuItem, estamos pasando la etiqueta en las etiquetas <em> junto con CheckIcon, para el renderValue estamos mostrando el ícono de ubicación junto con el valor de activeLabel uniéndose usando ‘-‘, y para renderMenu estamos mostrando la capa (0,1,2) y luego mostramos el menú.
App.js
import { Cascader } from "rsuite";
import "rsuite/dist/rsuite.min.css";
import LocationIcon from "@rsuite/icons/Location";
import CheckIcon from "@rsuite/icons/Check";
import PageEndIcon from "@rsuite/icons/PageEnd";
function App() {
const countries = [
{
label: "India",
value: "India",
children: [
{
label: "Haryana",
value: "Haryana",
},
{
label: "Assam",
value: "Assam",
children: [
{
label: "Darrang",
value: "Darrang",
},
{
label: "Dhemaji",
value: "Dhemaji",
},
],
},
{
label: "West Bengal",
value: "West Bengal",
children: [
{
label: "Hooghly",
value: "Hooghly",
},
{
label: "Darjeeling",
value: "Darjeeling",
},
],
},
{
label: "Nagaland",
value: "Nagaland",
},
],
},
{
label: "Germany",
value: "Germany",
},
{
label: "Sri Lanka",
value: "Sri Lanka",
},
];
return (
<div className="App">
<h4> React Suite Cascader Custom options</h4>
<Cascader
data={countries}
style={{ marginLeft: 80, marginTop: 10 }}
renderMenuItem={(label) => {
return (
<div>
<em>
<CheckIcon style={{ color: "green" }} />
{label}
</em>
</div>
);
}}
renderValue={(value, activeItemLabel) => {
return (
<b style={{ color: "black" }}>
<LocationIcon />
{activeItemLabel.map(
(item) => item.label).join(" - ")}
</b>
);
}}
renderMenu={(children, menu, parentNode, layer) => {
return (
<div>
<div
style={{
background: "#D5073F",
border: "2px solid #34382e",
padding: "4px",
color: "white",
textAlign: "center",
}}
>
Layer :{layer}
</div>
{menu}
</div>
);
}}
/>
</div>
);
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación con el siguiente comando desde el directorio raíz del proyecto.
npm start
Producción:
Referencia: https://rsuitejs.com/components/cascader/#custom-options