如何在 React 中呈现格式化的模板字符串而不是一段？

Question

我正在设置我的状态如下-

setMessage(color, text) {
        this.setState({ message: { color: color, text: text } });
    }

body = `These are your options to raise money:​
Increase your credit allowance (invite new people into the game, this increases your overdraft auto`

this.setMessage('red', `${body}` );

我正在渲染它是{this.state.message.text}，但是它不渲染多行，而是全部被挤进一个段落.

如何修复和渲染它？

Answer 1

您可以使用 Jsx 来做到这一点。我也遇到过这个问题，我是这样解决的，它对我有用。 您可以使用 React 片段标签或任何有效的 jsx 标签

setMessage(color, text) {
        this.setState({ message: { color: color, text: text } });
    }

body = <>These are your options to raise money:​<br />
Increase your credit allowance (invite new people into the game, this increases your overdraft auto</>

this.setMessage('red', body );