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

Question

I'm rendering different texts depending on a given variable, and I simply want to render
at a particular variable within h2 tag.

I tried using regex \\r and \\n (and the combination) to render, but it hasn't work.

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

The issue with your example is that the <br /> is inside a string, so React will read it as a string and won't turn the <br /> into a real HTML element.

The natural solution would be to concat the string to an actual JSX <br /> :

headline = 'Too bad.' + <br /> + 'Try again';

But this won't work as we hope it might. The result will be Too bad.[object Object]Try again . This is because JSX is just syntactical sugar that compiles down to React.createElement('br') , and this function returns an object that represents a React Node.

You could use a React Fragment instead of a string in the second case:

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 JSX compiles down to something like React.createElement(React.Fragment, [], ['Too bad.', React.createElement('br'), 'Try again']); This bit isn't too relevant to your question but I think it's good to know what JSX is doing under the hood.

Answer 2

It seems like you want to render a different headline depending on the tracker value passed from the parent.

Analysis

Let's see what's wrong with the code below.

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

First of all, the declaration of this.props, headline seems very unintuitive.
Let's separate it into two.

let headline;
let { tracker } = this.props;

Now, switch checks for the condition and try to assign the headline value.

  switch(tracker){
    case 1:
     headline = 'That is amazing!'
     break;
    case 2:
     headline = 'Too bad.<br />Try again'
     break;
  }

Now that's problematic because when you return <h2>{headline}</h2> , what React is expecting is an element .

The valid expression can be of string, number, or another JSX element.

The case 1, is OK, because it's a string.
But the reason you are having trouble with case 2 is because <br /> is part of a string, thus React considers it a string (and try to decode it).

So what can we do?

Solution(s)

You can convert the case 2 into an element by getting rid of quotes, and wrapping it into an element. You can use any elements such as 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;
  }

Another way is to render it dangerously . You should never do this unless you know what you are doing. I won't go further as this is probably not what you want.

Additional tip.

The code you used using switch is what's called an "imperative" code. (You specify "how" the component should work).
But React is declarative in nature, and you tell "what" the component should do.

So let's fix it up a bit and make it React-like.

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

The code above does the same thing, but you basically tell what to do, instead of how it should render.

Or you can simply go further but I guess this is enough for a tip.

Answer 3

In situations when you receive strings with a format that you can control (ie localization files, or fetched from server side message) and you want the output with line-break, you can use:

<div style={{whiteSpace: 'pre-wrap'}}>{'Too bad.\nTry again'}</div>

\\n and white-space: pre-wrap does the trick.

Answer 4

在这种情况下，我个人使用Fragment或一些不会产生特殊问题的元素（例如span 。