Material UI 文本域不对复杂字符串进行换行

Question

我正在尝试从 MySQL 查询中获取一些数据，以便在 Material UI 文本字段中很好地输出。我的文本字段如下所示：

<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.25\n                }\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\": true\n                    }\n                  ]\n                },\n                \
"condition_filtering_pct\": 100,\n                \"rows_for_plan\": 2,\n                \"cost_for_plan\": 0.45,\n                \
"chosen\": true\n              }\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\": null\n                }\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：

有什么办法可以让它按照我想要的方式输出吗？我已经测试过将 trace 变量更改为简单的 'hey \nhey' 字符串，并且效果很好，所以它似乎与这个复杂的字符串有关。该字符串是通过使用 MySql xdevapi 执行 Sql 查询生成的，并使用 Json.stringify(query, undefined,2).

转换为字符串

Answer 1

问题不是你的变量是一个数组而不是像你测试中那样的简单字符串吗？

编辑：问题似乎出在 JSON.stringify() 部分。如果你 JSON.stringify('\n')，输出将是转义的 '\n' 而不是实际的换行符

Answer 2

原来问题是 JSON 本身包含换行符 \n 以及一些转义字符串引号。 JSON.stringify() 方法然后实际打印这些字符。我通过添加 .replace(/\n/g, '\n').replace(/\"/g, '"') 解决了它。不是最优雅的解决方案，但它给了我想要的输出。

Material UI 文本域不对复杂字符串进行换行

Material UI Textfield does not do linebreak on complex string

json

newline

textfield

reactjs