Question

我正在使用React.js，在我的App组件的状态对象中，我有一个包含\ n个字符和空格的值。

this.state = {
    value: "def foo():\n    print('this is a function')\n\nfoo()"
}

但是，当我尝试通过将this.state.value包裹在{this.state.value}这样的p标签中以在屏幕上显示该值时，它只会打印出

def foo(): print('this is a function') foo()

，不显示空格和\ n字符。有什么办法可以让我像状态对象中显示的那样获取值以进行打印？在Chrome上进入React检查器，确认该值确实与我的状态对象中的值匹配。

Answer 1

尝试使用反引号语法的字符串模板，例如：

this.state = {
    value: `def foo():
  print('this is a function')

foo()`
}

编辑：为提高可读性，您可以尝试在setState调用之前定义常量：

const strTemplate = `def foo():
  print('this is a function')

foo()`;

this.state = {
    value: strTemplate
}

让我知道它是否有效：）

Answer 2

尝试此字符串：

def main():
try:
    res = ""
    while res != "exit":
        res = input()
        print("\n", res, "\n")
except EOFError as e:
    print(e)

if __name__ == "__main__":
    main()

Answer 3

这不是特定于React，而是针对HTML中如何处理空格字符。在 内可以将新行显示为，并且可以将多个空格显示为 。换行符和多个空格显示与单个空格字符相似。

它可以输出为

<p>def foo():
    print('this is a function')
foo()</p>

具有相同的结果。

要对此进行更改，应使用white-space CSS property更改空白显示方式，例如：

<p style={{ 'white-space': 'pre' }}>
  {this.state.value}
</p>

如果要输出具有指定缩进和等宽字体的代码，则默认情况下已经有<pre>标签具有适当的样式，可以使用它代替。

使用React并尝试从{this.state.value}中精确打印一个值

3 个答案: