Eslint react/jsx-one-expression-per-line：允许变量和 JSX 字符串在同一行，但不允许元素

Question

Eg for this JSX:

<h1>
  Hi {name}
</h1>

The react/jsx-one-expression-per-line plugin wants it as:

<h1>
  Hi
  {' '}
  {name}
</h1>

or

<h1>
  {`Hi ${name}`}
</h1>

I think both of those are ugly.I want to allow the first example. However, I don't want to disable the plugin because I don't want to allow multiple elements on one line:

<p>hi</p><p>bye</p>

How would I do this?

Answer 1

How about this?

const welcomeMessage = `Hi ${name}`;
<h1>
  {welcomeMessage}
</h1>

Answer 2

You can disable the rule for that line only:

<h1>
{/* eslint-disable-next-line react/jsx-one-expression-per-line */}
  Hi {name}
</h1>