Estoy tratando de crear un sistema en el que pueda hacer clic fácilmente en una oración dada en la página y hacer que cambie a una oración diferente con un color diferente al hacer clic. Soy nuevo en reaccionar de forma nativa y estoy tratando de descubrir la mejor manera de manejarlo. Hasta ahora, he podido hacer funcionar un conmutador, pero tengo problemas para descubrir cómo cambiar la clase, ya que todo se maneja dentro de un solo div.
const ButtonExample = () => { const [status, setStatus] = useState(false); return ( <div className="textline" onClick={() => setStatus(!status)}> {`${status ? 'state 1' : 'state 2'}`} </div> ); };¿Cómo puedo hacer que el estado 1 y el estado 2 se conviertan en declaraciones de retorno separadas que devuelvan textos + clases separados pero que alternan entre sí?
simplemente puede crear un componente para él, crear un estado para realizar un seguimiento del estado de alternancia y recibir el estilo de texto como accesorio
en la zona de pruebas del código React : https://codesandbox.io/s/confident-rain-e4zyd?file=/src/App.js
import React, { useState } from "react"; import "./styles.css"; export default function ToggleText({ text1, text2, className1, className2 }) { const [state, toggle] = useState(true); const className = `initial-style ${state ? className1 : className2}`; return ( <div className={className} onClick={() => toggle(!state)}> {state ? text1 : text2} </div> ); }en React-Native codesandbox: https://codesandbox.io/s/eloquent-cerf-k3eb0?file=/src/ToggleText.js:0-465
import React, { useState } from "react"; import { Text, View } from "react-native"; import styles from "./style"; export default function ToggleText({ text1, text2, style1, style2 }) { const [state, toggle] = useState(true); return ( <View style={styles.container}> <Text style={[styles.initialTextStyle, state ? style1 : style2]} onPress={() => toggle(!state)} > {state ? text1 : text2} </Text> </View> ); }Esto debería ser algo que estás buscando:
import React from "react" const Sentence = ({ className, displayValue, setStatus }) => { return ( <div className={className} onClick={() => setStatus((prevState) => !prevState)} > {displayValue} </div> ); }; const ButtonExample = () => { const [status, setStatus] = React.useState(false); return status ? ( <Sentence className="textLine" displayValue="state 1" setStatus={setStatus} /> ) : ( <Sentence className="textLineTwo" displayValue="state 2" setStatus={setStatus} /> ); }; Tienes un componente Sentence que incluye tres accesorios. Uno para un className diferente, uno para un valor diferente que se mostrará y cada uno necesitará acceso a la función que cambiará el status estado. Cada setter de un gancho también tiene acceso a una llamada de función, donde puede obtener el valor de estado anterior (actual), por lo que no necesita pasar el valor de estado actual.