向现有对象模型添加新项目反应js

Add new items to existing object model react js

初中正在努力学习。我有以下功能。

overlay = (rulersOnLine) => {
    const mainRulers = {
        AB: <Box sx={SX.ruler10} />,
        CD: <Box sx={SX.ruler20} />,
    };

    let skeleton;
    let newRulersOnLine = [];

    rulersOnLine.map((value, index) => {
        if (value === 1) {
            skeleton = {
                name: 'A' + index + 'B' + index,
                node: <Box sx={SX.ruler10} style={{opacity: 1}} />,
            };
        }
    });

    return mainRulers;
};

我的主要对象是

const mainRulers = {
    AB: <Box sx={SX.ruler10} />,
    CD: <Box sx={SX.ruler20} />,
};

我想添加更多项目动态 例如:

A1B1: <Box sx={SX.ruler20} />

rulersOnLine 是由 0,1(最多 4 个元素)组成的数组。

如何向主对象添加新项目(在给定的表格下)?

如果我理解正确你想把它添加到mainRulers,你可以这样做

overlay = (rulersOnLine) => {
  const mainRulers = {
    AB: <Box sx={SX.ruler10} />,
    CD: <Box sx={SX.ruler20} />,
  };

  rulersOnLine.forEach((value, index) => {
    if (value === 1) {
      mainRulers[`A${index}B${index}`] = (
        <Box sx={SX.ruler10} style={{ opacity: 1 }} />
      );
    }
  });

  return mainRulers;
};