如何在JSX中按Airbnb规范嵌入行内链接并通过Lint检查？

哈哈，这个问题我太有共鸣了！当初刚用Airbnb规范写React的时候，也被这个react/jsx-one-expression-per-line规则折腾过——既要保证渲染出来的文本有正确的空格，又不想写得啰啰嗦嗦。

其实有两种既符合规范又简洁清晰的写法，完全能满足你的需求：

方案一：把带空格的文本整合成单个表达式 #

这种写法最简洁，和你最初的思路很接近，只是把前缀文本和末尾空格合并成一个字符串表达式：

<footer>
  {'Source available '}
  <a href="#">here</a>
  {'.'}
</footer>

每个表达式单独占一行，完美符合one-expression-per-line规则，渲染出来的效果就是正常的「Source available here.」，空格完全没问题。

方案二：保留原文本结构，单独加空格表达式 #

如果你更喜欢拆分原文本的结构，也可以把空格单独作为一个小表达式放在中间，可读性反而更强：

<footer>
  Source available
  {' '}
  <a href="#">here</a>
  .
</footer>

这种写法和你最初的三行写法几乎一致，只是多了一行空格字符串，完全不算冗长，还能清晰看到文本和链接的拆分逻辑。

至于你提到的把所有内容挤在一行的写法，虽然看起来短，但确实会触发Lint规则——Airbnb的这个规范本质是为了保证JSX的可读性，所以多行拆分的写法其实更符合团队协作的要求。

内容的提问来源于stack exchange，提问作者basse