我已經對文本進行了拆分。現在我想將其進一步拆分為單個字母/字符。此外，我想將拆分程序擴展到內容內部的一組陣列。
下面是我的反應代碼：
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>
);
}
uj5u.com熱心網友回復：
當您使用時，str.split(" ")您是說將帶有分隔符的字串拆分為 ""。它將拆分字串中存在空格的字串。
但是你想要的是用每個字符分割字串，""因為你必須用as分割字串
現場演示
<div>
{str.split("").map((item, index) => {
return <div key={index}>{item}</div>;
})}
</div>
資源
- 字串.prototype.split
uj5u.com熱心網友回復：
您可以在字串上使用相同的拆分 API 來獲取字母
console.log("string".split('')); // ['s', 't', 'r', 'i', 'n', 'g']
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344726.html
標籤：javascript css 反应钩子 反应备忘录
下一篇：如何創建這樣的CSS網格布局？