javascript - 无法对齐网格项目之间的分隔线

Question

我想在项目Divider之间有Grid。

输出应该是这样的： -

第 1 栏 | 第 2 栏 | 第 3 栏

虽然在我的代码中我看不到Divider并且项目以垂直方式对齐。

import "./styles.css";
import { Grid, Divider } from "@material-ui/core";
export default function App() {
  const tempArray = ['Col 1', 'Col 2', 'Col 3'];
  return(
    <Grid container align='center' direction='column'>
      {tempArray.map((title)=>{
        return(
          <Grid container direction='row'>
            <Grid item xs>
              <strong>{title}</strong>
            </Grid>
            <Divider orientation='vertical' flexItem></Divider>
          </Grid>
        );
        }
      )}

    </Grid>
  );
}

另外，我不确定如何跳过最后一项的分隔符。
这是代码沙箱链接。

标签： javascriptreactjsmaterial-ui

Answer 1

容器内的GridsGrid需要将xsprop 设置true为允许它共享可用空间（docs）。否则它将尝试占据整个视口宽度，这是默认行为。

我不确定如何跳过最后一项的分隔线。

Divider您可以根据当前索引有条件地渲染：

{i !== tempArray.length - 1 && (
  <Divider orientation="vertical" flexItem></Divider>
)}

完整的工作代码：

<Grid container align="center">
  {tempArray.map((title, i) => {
    return (
      <Grid key={title} item container xs /* <------------------ add this */>
        <Grid item xs>
          <strong>{title}</strong>
        </Grid>
        {i !== tempArray.length - 1 && (
          <Divider orientation="vertical" flexItem></Divider>
        )}
      </Grid>
    );
  })}
</Grid>