Estoy tratando de aprender React y estoy creando un menú desplegable simple que muestra una lista de opciones de clasificación para que un usuario elija. Al hacer clic en cualquier tipo, se ordenará un HTMl Ul actual (alfabético, más antiguo-más reciente, etc.)
Tengo un componente llamado SortSelection que contiene el menú desplegable y toda la lógica necesaria para actualizar el ul. Se llama así (dentro de otro componente):
<div className="collectionsSortDropdownContainer"> <SortSelection options={[ { value: '-publishDate', name: 'Newest' }, { value: '+publishDate', name: 'Oldest' }, ]} handleSort={this.handleSort.bind(this)} /> </div> Dentro de SortSelection.jsx , actualmente lo tengo escrito así:
const SortSelection = ({ options, extraClass, handleSort, }) => { //...necessary logicSin embargo, me doy cuenta de que debo actualizar SortSelection para que sea un componente con estado, ya que haré algunas cosas adicionales en la interfaz de usuario, como mostrar el valor actual de Ordenar y agregar una marca de verificación azul en la ordenación seleccionada por el usuario.
Tengo problemas para descubrir cómo volver a escribir mi componente para que se vea así:
class SortSelection extends Component { constructor(props) { super(props); this.state = { currentSort: currentSort }; } }al mismo tiempo que se asegura de que los tres parámetros de datos necesarios (options, extraClass, handleSort) se pasen para instanciar el componente . ¿Cómo puedo hacer esto correctamente?
SortSelectionDefinitivamente no necesita usar un componente de clase para eso, el componente funcional también funcionará porque tenemos React State Hook
Entonces, para que sea menos complicado para usted, siga usando un componente funcional como ya lo hizo:
Solo usa useState así:
const { useState } = require("react") const SortSelection = ({ options, extraClass, handleSort, }) => { const [currentSort, setCurrentSort] = useState(); //<-- useState hook //...necessary logic return ( //...JSX ) } currentSort ahora es un estado, y cada vez que desee cambiar ese estado y activar una nueva representación, use setCurrentSort