javascript - React，如何在 jsx 表达式中嵌入

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

现在这是有问题的，因为当你返回 <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>
  )
}

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

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