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

Question

例如对于这个 JSX：

<h1>
  Hi {name}
</h1>

该react/jsx-one-expression-per-line插件希望它是：

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

或者

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

我觉得这两个都很丑。我想允许第一个例子。但是，我不想禁用该插件，因为我不想在一行中允许多个元素：

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

我该怎么做？

Answer 1

这个怎么样？

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