javascript - React，如何将<br/>嵌入jsx表达式中

我根据给定的变量渲染不同的文本，我只想在h2标签内的特定变量上渲染。我尝试使用正则表达式\ r和\ n（以及组合）进行渲染，但是它不起作用。render() { let {tracker} = this.props, headline; switch(tracker){ case 1: headline = 'That is amazing!' break; case 2: headline = 'Too bad.<br />Try again' break; } return( <h2>{headline}</h2> )} 最佳答案 似乎您想根据从父级传递的跟踪器值来渲染不同的标题。分析让我们看看下面的代码有什么问题。render() { let {tracker} = this.props, headline; switch(tracker){ case 1: headline = 'That is amazing!' break; case 2: headline = 'Too bad.<br />Try again' break; } return( <h2>{headline}</h2> )}首先，this.props, headline的声明似乎很不直观。让我们将其分成两个部分。let headline;let { tracker } = this.props;现在，switch检查条件并尝试分配标题值。 switch(tracker){ case 1: headline = 'That is amazing!' break; case 2: headline = 'Too bad.<br />Try again' break; }现在这是有问题的，因为当您返回<h2>{headline}</h2>时，React期望的是element。有效表达式可以是字符串，数字或另一个JSX元素。情况1可以，因为它是一个字符串。但是您遇到情况2的原因是因为<br />是字符串的一部分，因此React将其视为字符串（并尝试对其进行解码）。所以，我们能做些什么？解决方案您可以通过删除引号并将其包装到元素中来将案例2转换为元素。您可以使用任何元素，例如div，React.Fragmenet（ /）。 switch(tracker){ case 1: headline = 'That is amazing!' break; case 2: headline = <>Too bad.<br />Try again</> // or use "div" or other element. // headline = <div>Too bad.<br />Try again</div> break; }另一种方法是渲染它dangerously。除非您知道自己在做什么，否则绝对不要这样做。我不会更进一步，因为这可能不是您想要的。额外提示。您使用switch使用的代码称为“命令式”代码。 （您指定组件应如何工作）。但是React本质上是声明性的，您可以告诉组件应该做什么。因此，让我们对其进行修复，使其类似于React。render() { // 👇 tracker is not changed, so declare it as `const`, which is a better practice. const {tracker} = this.props // You tell React what you want to do. // When the tracker value is 1, show 'That's amazing!', // When it's two, show the sympathy. return( <h2> {tracker === 1 && 'That is amazing!} {tracker === 2 && <>Too bad.<br />Try again</>} </h2> )}上面的代码执行相同的操作，但是您基本上会说出要做什么，而不是应该如何呈现。或者，您可以走得更远，但我想这足以给小费。关于javascript - React，如何将<br/>嵌入jsx表达式中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57383592/