material-ui - 带有\n 的 Material UI TextField 值不会换行

Question

我正在尝试使用包含\n(换行符)的默认值字符串加载 Material-UI TextField @material-ui/core": "^4.9.11"。

但是，我没有让 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>
  );
}

I've got a codesandbox of this here

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