将新项目添加到现有 object model react js

Question

初中尝试学习。 我有以下 function。

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;
};

我的主 object 是

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

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

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

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

如何向主 object 添加新项目（在给定的表格下）？

Answer 1

如果我理解正确你想将它添加到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;
};