#json #reactjs #newline #textfield
#json #reactjs #новая строка #текстовое поле
Вопрос:
Я пытаюсь получить некоторые данные из запроса MySQL, которые будут красиво выводиться в текстовом поле пользовательского интерфейса Material. Мое текстовое поле выглядит следующим образом:
<TextField
className={classes.output}
InputProps={{
classes: {
input: classes.code,
},
}}
multiline
rows={20}
variant="outlined"
value={trace}
/>
Переменная трассировки выглядит следующим образом, сложная строка с большим количеством экранирований:
[
"select * from person",
"{n "steps": [n {n "join_preparation": {n "select#": 1,n "steps":
[n {n "expanded_query": "/* select#1 */ select `person`.`name` AS `name` from `person`"
n }n ]n }n },n {n "join_optimization": {n "select#":
1,n "steps": [n {n "table_dependencies": [n
{n "table": "`person`",n "row_may_be_null": false,n
"map_bit": 0,n "depends_on_map_bits": [n
]n }n ]n },n {n "rows_estimation": [n {n
"table": "`person`",n "table_scan":
{n "rows": 2,n "cost": 0.25n }n
}n ]n },n {n "considered_execution_plans":
[n {n "plan_prefix": [n ],n "table": "`person`",n
"best_access_path"
: {n
"considered_access_paths": [n {n "rows_to_scan": 2,n
"access_type": "scan",n "resulting_rows": 2,n "cost": 0.45,n
"chosen": truen }n ]n },n
"condition_filtering_pct": 100,n "rows_for_plan": 2,n "cost_for_plan": 0.45,n
"chosen": truen }n ]n },n {n
"attaching_conditions_to_tables": {n "original_condition": null,n "attached_conditions_computation": [n ],n
"attached_conditions_summary": [n {n "table": "`person`",n
"attached": nulln }n ]n }n },n {n
"finalizing_table_conditions": [n ]n },n {n "refine_plan": [n {n
"table": "`person`"n }n ]n }n ]n }n },n {n "join_execution": {n "select#": 1,n "steps": [n ]n }n }n ]n}",
0,
0
]
И я хочу, чтобы оно отображало что-то вроде этого, где все новые строки фактически переходят в новую строку:
Но вместо этого я получаю это, где n просто печатается напрямую: 
Могу ли я что-нибудь сделать, чтобы оно выводилось так, как я хочу? Я протестировал изменение переменной трассировки на простую строку ‘hey nhey’, и это работает нормально, так что, похоже, что-то в этой сложной строке. Строка генерируется путем выполнения Sql-запроса с использованием MySQL xdevapi и преобразования в строки с использованием Json.stringify (запрос, не определено, 2).
Комментарии:
1. Мне кажется, что вам понадобится текстовое поле вместо текстового поля. Или, если вы хотите, чтобы на выходе был отступ, как на картинке, возможно, лучший подход — создать массив строк и разделить их по заданным критериям и использовать функцию map() для печати каждой строки за раз в текстовом поле.
2. В качестве примера я рассматриваю сгенерированный vscode HTML для редактора кода, и они используют последовательность divs с тегами span, а внутри, для отступа, они используют «amp; nbsp»
Ответ №1:
Оказалось, что проблема заключалась в том, что сам JSON включал символ прерывания строки n, а также некоторые экранированные строковые кавычки. Затем метод JSON.stringify() фактически печатает эти символы. Я решил это, добавив .replace(/\n/g, 'n').replace(/\"/g, '"') . Не самое элегантное решение, но оно дает мне результат, который я хотел.
Ответ №2:
Разве проблема не в том, что ваша переменная представляет собой массив, а не простую строку, как в вашем тесте?
Редактировать: Проблема, похоже, связана с частью JSON.stringify(). Если вы используете JSON.stringify(‘ n’), результатом будет экранированный ‘ n’, а не фактический разрыв строки
Комментарии:
1. Это массив JSON, который был упорядочен с помощью метода JSON.stringify(). Это не должно быть проблемой.
2. На самом деле, если вы используете JSON.stringify(‘ n’), результатом будет экранированный ‘ n’, что означает, что вы увидите ‘ n’, а не фактический разрыв строки. Вы можете видеть это здесь В вашем примере, вы могли бы попробовать отобразить trace [1], чтобы проверить это.
3. Хорошо, я понимаю, тогда проблема может быть в части stringify. Рассмотрим это.
4. Да, могу подтвердить, что необработанный результат запроса содержит разрывы строк, поэтому они просто печатаются. Тогда вопрос в том, есть ли простой способ «отменить» их?
5. Я бы просто изменил способ обработки вашего ввода. Если вы знаете, что это массив, содержащий строки, вы могли бы просто использовать метод объединения: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /…