带 \n 的 Material UI TextField 值不会进行换行

Question

我正在尝试加载 Material-UI TextField @material-ui/core": "^4.9.11" ，其默认值字符串包含 \n （新行转义字符）。

但是，我没有让 defaultValue 中的文本落在两行上。\n 转义符仅包含在该字段中。因此，我想将包含 \n 的字符串传递给 defaultValue 并将其放在 TextField 的两行上。

import React from "react";
import "./styles.css";
import TextField from "@material-ui/core/TextField";

export default function App() {
  return (
    <div className="App">
      <TextField multiline rows={2} defaultValue="Line1\nLine2" />
    </div>
  );
}

我这里有一个代码和盒子

Answer 1

您可以为此使用一个变量：

const val = "Line1\nLine2";
return (
    <div className="App">
        <TextField multiline rows={2} defaultValue={val} />
    </div>
);

如果您使用字符串作为属性的值 - React 会将其视为最终字符串（而不是 js 字符串），这意味着您的字符串实际上是"Line1\\nLine2".
要解决这个问题，只需使用 js 字符串（使用变量，如上面的示例所示）或将字符串的值作为对象传递：

return (
    <div className="App">
        <TextField multiline rows={2} defaultValue={"Line1\nLine2} />
    </div>
);