ReactJS中如何实现JSX内span元素之间的指定位置换行

问题原因 #

<span> 属于行内元素，默认不会触发换行，因此四个连续的span标签内容会默认排列在同一行。

可行实现方案 #

方案1：插入换行标签（最简单快捷）

直接在Text B的span标签后插入JSX自闭合换行标签 <br/> 即可：

<div>
  <span>Text A</span>
  <span>Text B</span>
  <br />
  <span>Text C</span>
  <span>Text D</span>
</div>

方案2：用块级元素包裹每行内容（扩展性最好）

将每一行的内容用块级元素（如<div>）单独包裹，块级元素默认独占一行，后续要给每行加样式也更方便：

<div>
  {/* 第一行内容 */}
  <div>
    <span>Text A</span>
    <span>Text B</span>
  </div>
  {/* 第二行内容 */}
  <div>
    <span>Text C</span>
    <span>Text D</span>
  </div>
</div>

方案3：通过CSS布局控制（适合整体布局统一规范场景）

给父容器设置flex布局+换行，插入占位元素触发换行：

<div style={{ display: "flex", flexWrap: "wrap", width: "fit-content" }}>
  <span>Text A</span>
  <span>Text B</span>
  {/* 占满整行的占位元素触发换行 */}
  <div style={{ width: "100%" }}></div>
  <span>Text C</span>
  <span>Text D</span>
</div>

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