如何在 useState 字符串中使用 replace()？

Question

我正在从数据库中以字符串形式为我的 React.js 应用程序获取数据，但是当我尝试将<br>标记应用于所有'/n'时，我将这些作为字符串的一部分而不是作为越线。 我尝试删除引号或改用 JSX <br/> ，但仍然得到相同的结果。 我应该怎么办？

我的代码如下所示：

const [abt, setAbt] = React.useState();
React.useEffect(() => {
  setAbt(databaseValue.replace(/\n/g, '<br>'))
}, [])
return (
  {abt}
)

谢谢！

Answer 1

不要将 HTML 放在 state 中。

改用 JSX 构建你想要的 DOM。

例如

const [abt, setAbt] = React.useState("");

React.useEffect(() => {
  setAbt(databaseValue)
}, [])

const nodes = abt.split("\n").reduce( (acc, line) => {
   if (acc) {
        return [...acc, (<br />), line];
   }
   return [line]
}, null);

return <>{nodes}</>

... 或者可能只是首先使用<pre>元素。

Answer 2

除了保存字符串，您可以将其拆分为数组，然后在渲染期间使用map将<br>放在它们之间：

function App() {
  const [abt, setAbt] = useState([]);
  useEffect(() => {
    const string = "First\nSecond";
    const splitted = string.split(/\n/)
    setAbt(splitted)
  }, [])

return (
    <div className="App">
      {abt.map(slice => <>{slice} <br></br> </>)}
    </div>
  );
}