材质UI文本字段不对复杂字符串进行换行

编程问答 2022-07-24

问题描述

我正在尝试从MySQL查询中获取一些数据，以便在Material UI Textfield中很好地输出。我的文本字段看起来像这样：

<TextField
  className={classes.output}
  InputProps={{
    classes: {
      input: classes.code,},}}
  multiline
  rows={20}
  variant="outlined"
  value={trace}
/>

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
]

我希望它呈现这样的内容，其中所有换行符实际上都换行了：

enter image description here

但是我得到的是\ n直接打印的位置：

enter image description here

我可以做些什么使它以我想要的方式输出吗？我已经测试过将trace变量更改为简单的'hey \ nhey'字符串，并且效果很好，因此似乎与这个复杂的字符串有关。通过使用MySql xdevapi进行Sql查询并使用Json.stringify（query，undefined，2）转换为字符串来生成字符串。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

jsonnewlinereactjsreactjstextfield