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

Question

我已经对文本进行了拆分。现在我想将它进一步拆分为单个字母/字符。此外，我想将拆分过程扩展到内容内部的一组数组。

下面是我的反应代码：

    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>
      );
    }

Answer 1

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

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

Answer 2

当您使用时str.split(" ")，您是说将带有分隔符的字符串拆分为 " "。它将在字符串中有空格的地方拆分字符串。

但是你想要的是用每个字符分割字符串，因为你必须用""as分割字符串

现场演示

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

资源

1. String.prototype.split