Tengo un área de textarea , creé un div de vista previa que solo muestra el texto, pero quiero que el texto tenga un color de fondo gris cuando la oración está entre `` para mostrar códigos.
<textarea onChange={handleChange}></textarea> Tengo un div que contiene pre y bloque de code .
<div> <pre>{preview}</pre> <code>{code}</code> </div> mi función handleChange es:
const handleChange = (e) =>{ e.preventDefault() setDescription(e.target.value) setPreview(e.target.value); if (e.key === '`'){ setCode(e.target.value) } } Aquí, el Código y la vista previa se definen usando useState
const [preview, setPreview] = useState(""); const [code, setCode] = useState("");¿Hay alguna manera de que pueda lograrlo?
Probablemente debería considerar usar alguna biblioteca para esto que maneje todos los casos extremos.
Pero para fines de aprendizaje, puede consultar el fragmento a continuación, dividí el texto por ` y envolví todos los elementos de índice impares en el code .
Cuando divide la cadena "type `code` here" , obtiene esta matriz ["type", "code", "here"] y si observa que el contenido dentro de ` siempre estará en un índice impar. Por lo tanto, mapeé la matriz y envolví todos los elementos de índice extraños dentro del code . Intente escupir más hilos de este tipo y obtendrá más claridad al respecto.
function App() { const [content, setContent] = React.useState("Type `code` here"); return ( <div> <textarea value={content} onChange={({ target }) => setContent(target.value)} ></textarea> <p> {content .split("`") .map((c, i) => (i & 1 ? <code key={i}>{c}</code> : c))} </p> </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <App /> </React.StrictMode> ); code { background: #eee; padding: 0.25rem; border-radius: 0.15rem; } textarea { width: 60ch; height: 5rem; } <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="root"></div>