如何在反应挂钩中将单词进一步拆分为字母

Question

我对正文进行了拆分。现在我想把它进一步拆分成一个 letter/character。此外，我想将拆分过程扩展到内容内部的一组数组。

下面是我的反应代码：


    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 Whosebug!"} />
          </h2>
        </div>
      );
    }

Answer 1

您可以在字符串上使用相同的拆分 API 来获取字母

console.log("string".split('')); // ['s', 't', 'r', 'i', 'n', 'g']

Answer 2

当您使用 str.split(" ") 时，您是在说 将字符串拆分为 " " 。它将拆分字符串中 space 所在的字符串。

但是你想要的是用每个字符拆分字符串，为此你必须将字符串与 "" 拆分为

现场演示

<div>
  {str.split("").map((item, index) => {
    return <div key={index}>{item}</div>;
  })}
</div>

资源

String.prototype.split

如何在反应挂钩中将单词进一步拆分为字母

How to split words further into letters in react hooks

javascript

css

react-hooks

react-memo