React项目中flex-direction: row属性不生效问题排查

问题根因 #

你给Fragment组件添加className属性的操作是无效的。React的Fragment（也可简写为<></>）的唯一作用是包裹多个同级子元素，避免额外生成无意义的DOM节点，它本身不会出现在最终渲染的页面DOM树中，因此你设置的container类名没有对应的挂载载体，写好的flex样式完全不会作用到任何元素上。三个<p>标签默认是块级元素，自然就会纵向排列。

修复方案 #

把承载container类的Fragment替换为真实的DOM容器节点即可，最常用的是<div>，修改后的代码如下：

修正后JSX代码 #

import { Fragment } from 'react';

return (
    <Fragment>
        <h1>The About us page.</h1>
        <div className="container">
          <p>Dog</p>
          <p>Cat</p>
          <p>Other Dog</p>
        </div>
    </Fragment>
);

你原来写的CSS不需要做任何修改，修改后三个<p>标签就会被识别为flex容器的子元素，按flex-direction: row的规则横向排列。

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