Me gustaría representar condicionalmente un componente basado en la propiedad de encabezado de mi constante. Básicamente, si el encabezado es Woffy --> Render Component1 Este es mi código:
import React from 'react'; import Component1 from '../Collection/Component1'; import Component2 from '../Collection/Component2'; const pets = [ { header: 'Woffy', image: '/img/dog.png' }, { header: 'kitty', image: '/img/cat.png' }, class demo class extends React.Component{ render(){ return( <div> {header === "Woofy" && <Component1 />} {header === "kitty" && <Component2 />} </div> ) } }Bueno, tengo un componente desplegable de reacción
<Dropdown/>de Fluent UI, quiero mostrar el componente basado en la selección desplegable, que quiero asignar desde la propiedad del encabezado. es eso posible ? Este es mi menú<Dropdown items={pets} placeholder="Zoo world" />
Puede usar la variable en la que se encuentra como value del estado de Dropdown y luego comparar la variable para representar el componente.
import React from "react"; import { Dropdown } from "@fluentui/react-northstar"; const pets = [ { key: "1", header: "Woffy", image: "/img/dog.png" }, { key: "2", header: "kitty", image: "/img/cat.png" } ]; const DropdownExample = () => { const [dropdownValue, setDropdownValue] = React.useState("3"); console.log(dropdownValue); return ( <Dropdown items={pets} value={dropdownValue} onChange={(_, data) => setDropdownValue(data.value.header)} /> ); }; Ahora compare esta variable dropdownValue con el componente de procesamiento.
<div> {dropdownValue === "Woofy" && <Component1 />} {dropdownValue === "kitty" && <Component2 />} </div>Puede verificar el valor del header utilizando el método Array.map y luego devolver el resultado deseado.
<div> {pets.map((e) => { if (e.header === "Woffy") { return <Component1 />; } else if (e.header === "kitty") { return <Component2 />; } else { return null; } })} </div>;