我根据给定的变量渲染不同的文本,我只想在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/
10-11 07:34