Значение TextField пользовательского интерфейса с \ n не делает разрыв строки

Question

Я пытаюсь загрузить Material-UI TextField @ material-ui / core ":" ^ 4.9.11 "со строкой значения по умолчанию, содержащей \ n (escape-символ новой строки).

Однако я не получаю, чтобы текст в defaultValue падал на две строки. Экранирование \ n просто включено в поле. Поэтому я хочу передать строку, содержащую \ n, в defaultValue и получить ее go в двух строках 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>
);

Если вы используете строку в качестве значения для свойства - реакция увидит ее в качестве конечной строки (а не js строки), которая означает, что ваша строка на самом деле "Line1\\nLine2".
Чтобы решить эту проблему, просто используйте js -строку (используя переменную, как в примере выше) или передайте значение вашей строки как объект:

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