材质UI TextField的值带/n不做换行。

Question

我试图加载一个Material-UI TextField @material-uicore": "^4.9.11 "的默认值字符串，其中包含一个 \n（新行转义字符）。

然而，我没有让defaultValue中的文本落在两行上。 nd/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-string（使用一个变量，就像上面的例子一样），或者将字符串的值作为一个对象传递。

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