A continuación, tenemos que importar nuestro botón de conmutación en el componente con el que planeamos usarlo. Nos referiremos a esto como nuestro componente StatusCard.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162import*asReactfrom$0027react$0027;import{Toggle}from$0027.. /Toggle$0027;interfazStatusCardProps{DefaultStatus:StatusTypes}interfazStatusCardState{Status:StatusTypes}typeStatusTypes="Good"|"Slow Down"|"Stuck";exportarclase predeterminadaStatusCardextendsReact. Componente<StatusCardProps,StatusCardState,| {estado predeterminadoProps={Estado predeterminado: "Bueno"} state ={Estado:esto.props.DefaultStatus}toggleClickHandler=()= setState((prevState)=;{if(prevState.Status==="Good"){retorno{Status: "Stuck"};}if(prevState.Status==="Slow Down"){retorno{Status: "Good"};}retorno{Status: "Slow Down"};})}getColor(){if(this.state.Status==="Good"){retorno "#0F0";}si(this.state. Status==="Desaceleración"){retorno "#f4cf53";}retorno "#F00";}render(){retorno(<<div style={{{{ fondo:esto. getColor(), color: "#000", altura: "200px", anchura: "200px",};{este.estado.Status}</div><ToggleClickHandler={este.toggleClickHandler}/{N-)}}TypeScript
Vamos a desglosar esto desde el principio.
Primero, declaramos nuestros componentes de utilería y las interfaces de estado, para que TypeScript sepa qué tipo de utilería debe recibir este componente y qué tipo de estado registra.
Dentro de nuestro componente React, notarás una propiedad especial de Props estática por defecto que nos permite decirle a TypeScript qué props no son necesarios y tienen un conjunto por defecto. Puedes leer más en la documentación de TypeScript sobre el establecimiento de los props por defecto para React.
Luego establecemos nuestro estado de componentes por defecto.
El siguiente método es nuestro toggleClickHandler. Este método contiene la lógica que queremos enviar a nuestro componente ToggleButton cuando se hace clic en él. Cambiará el estado de este componente. La parte importante que hay que tener en cuenta es el uso del método de la flecha para crear la función. Esto vincula automáticamente «esto» de JavaScript al componente StatusCard. Sin él, cuando llamamos a este.setState JavaScript buscaría el estado del botón actual en el que se ha pulsado.
Puedes hacer esto sin usar la función de la flecha, pero añade más sintaxis. Tienes dos opciones alternativas. Ambas requieren el uso del método bind de JavaScript.
Podrías añadir un this.toggleClickHandler = this.toggleClickHandler.bind(this); en el constructor de tu clase.
También podrías pasar este.toggleClickHandler.bind(esto) en el componente del Toggle Button ClickHandler prop.
Para terminar nuestro componente, hay un simple método de getColor para mostrar un color y un texto diferente dependiendo del estado de nuestra aplicación. Por último está nuestro método de renderización. El método de renderización muestra nuestro componente y el componente del botón Toggle. Aquí podemos pasar nuestro toggleClickHandler como una propiedad a nuestro componente Toggle.