He hecho una división del Texto. Ahora quiero dividirlo aún más en una sola letra/carácter. Además, quiero extender el proceso de división a un conjunto de matrices que se encuentran dentro del contenido.
A continuación se muestra mi código de reacción:
import React from "react"; import "./styles.css"; import content from "./content"; // Splitting Texts const SplitText = React.memo(({ str }) => { return ( <div> {str.split(" ").map((item, index) => { return <div key={index}>{item}</div>; })} </div> ); }); // Main App export default function App() { return ( <div className="App"> <h1> <SplitText str={"Lucie Bachman"} /> </h1> <h2> <SplitText str={"Hey, this is my first post on StackOverflow!"} /> </h2> </div> ); }
puede usar la misma API dividida en una cadena para obtener las letras
console.log("string".split('')); // ['s', 't', 'r', 'i', 'n', 'g']
Cuando está usando str.split(" ")
, entonces está diciendo que dividió la cadena con el separador como " " . Dividirá la cadena donde está el espacio en la cadena.
Pero lo que quieres es dividir la cadena con cada carácter, para eso tienes que dividir la cadena con ""
como
Demo en vivo
<div> {str.split("").map((item, index) => { return <div key={index}>{item}</div>; })} </div>
Recursos