React，我如何在 jsx 表达式中嵌入 <br/>

Question

我根据给定的变量呈现不同的文本，我只想
在 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>
  )
}

Answer 1

似乎您想根据从父级传递的跟踪器值呈现不同的标题。

分析

让我们看看下面的代码有什么问题。

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;
  }

现在这是有问题的，因为当你 return 时<h2>{headline}</h2>，React 期望的是一个element。

有效表达式可以是字符串、数字或其他 JSX 元素。

情况 1 是可以的，因为它是一个字符串。
但是您在案例 2 中遇到问题的原因是因为<br />它是字符串的一部分，因此 React 将其视为字符串（并尝试对其进行解码）。

所以，我们能做些什么？

解决方案

您可以通过去掉引号将 case 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;
  }

另一种方法是危险地渲染它。除非您知道自己在做什么，否则您永远不应该这样做。我不会更进一步，因为这可能不是你想要的。

额外的提示。

您使用 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>
  )
}

上面的代码做同样的事情，但你基本上是告诉做什么，而不是它应该如何呈现。

或者你可以更进一步，但我想这足以作为小费。