React中如何正确循环渲染SliderComponent，解决innerHTML设置报错问题

• 执行时机错误：window.onload 触发时，React组件GrommetButtonEx可能还未完成挂载渲染，output_div节点还不存在，所以document.getElementById("output_div")返回null，调用innerHTML就会触发你遇到的报错。
• 实现逻辑错误：你拼接的<SliderComponent/>是JSX语法，不属于原生HTML标签，浏览器原生不识别，就算你成功插入到innerHTML里，也只会被当成普通字符串渲染，不会被React解析为正常的Slider组件，绑定的props参数也不会生效。

React本身支持列表渲染，直接在JSX中通过map循环生成组件即可，不需要手动操作原生DOM，修改后代码如下：

export function GrommetButtonEx() {
  // 定义要生成的slider数量，可根据需求动态调整
  const sliderCount = 5;
  return (
    <div>
      <Grommet theme={grommetTheme}>
        <Sidebar
          border={{ color: "grey", size: "medium" }}
          width="340px"
          background={{ color: "black", opacity: "strong" }}
          style={{ borderRadius: "15px" }}
        >
          <Accordion style={{ color: "grey" }}>
            <AccordionPanel
              style={{ height: "30px" }}
              label={
                <Text color="white" weight="bold" size="small">
                  Joint Position
                </Text>
              }
            >
              {/* 直接用map循环生成多个SliderComponent */}
              {Array.from({length: sliderCount}).map((_, index) => (
                <SliderComponent
                  key={index}
                  sliderName={`slider ${index}`}
                  min={0}
                  max={17}
                  step={0.1}
                />
              ))}
            </AccordionPanel>
          </Accordion>
        </Sidebar>
      </Grommet>
    </div>
  );
}

注意：循环生成的React组件需要添加唯一的key属性，如果你的slider参数有唯一业务标识可以替换index作为key值，无特殊标识的场景下用index也可正常运行。

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