如何动态调整MUI Grid组件的列宽大小？

报错原因 #

你传入xs属性的写法错误：JSX中传递变量仅需要一层{}包裹，{{sizeOfPanel}}的写法实际是传递了一个结构为{ sizeOfPanel: sizeOfPanel }的对象，与Grid组件xs属性要求的数字类型不匹配，因此触发报错。

正确实现方案 #

MUI Grid默认采用12栅格布局，你可以通过state存储Part1的宽度值，Part2的宽度自动用12减去Part1的宽度即可，完整示例如下：

import { useState } from 'react';
import Grid from '@mui/material/Grid';

function DemoComponent() {
  // 初始化Part1的xs尺寸为6
  const [part1XsSize, setPart1XsSize] = useState(6);
  // Part2的xs尺寸自动适配剩余栅格
  const part2XsSize = 12 - part1XsSize;

  // 触发拓宽Part2的方法，可绑定到按钮点击等交互事件
  const handleExpandPart2 = () => {
    setPart1XsSize(3);
  };

  return (
    <>
      <button onClick={handleExpandPart2}>点击拓宽Part2</button>
      <Grid container>
        <Grid item xs={part1XsSize}>Part 1</Grid>
        <Grid item xs={part2XsSize}>Part 2</Grid>
      </Grid>
    </>
  );
}

如果是类组件，将state定义在constructor中，通过this.state读取、this.setState修改即可，核心逻辑一致。

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