javascript 中 html 内的循环函数（React）

Question

我想在 Html 中使用不同的输入循环我的函数 SliderComponent 以创建多个组件。我在网上找到了这个解决方案，我们使用“id”和“getElementById”将字符串和 return 构建为 Html，但我无法使其工作。

 export function GrommetButtonEx() {
      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>
                  }
                >
                  <div id="output_div"></div>
    
                  {/* This works
                  <SliderComponent
                    sliderName={"slider 5"}
                    min={0}
                    max={17}
                    step={0.1}
                  />
                   */}
                </AccordionPanel>
              </Accordion>
            </Sidebar>
          </Grommet>
        </div>
      );
    }
    
    window.onload = function () {
      var outputHTML = "";
      for (var k = 0; k < 5; k++) {
        outputHTML +=
          '<SliderComponent sliderName={"slider ' +
          k +
          '"} min={0} max={17} step={0.1}';
      }
      document.getElementById("output_div").innerHTML = outputHTML;
    };

我收到以下错误：

TypeError: Cannot set properties of null (setting 'innerHTML')

在：

document.getElementById("output_div").innerHTML = outputHTML;

这是正确的方法吗，还是有更好的方法？

Answer 1

您应该使用 componentDidMount 钩子而不是 onload。

componentDidMount() 在安装组件（插入到树中）后立即调用。需要 DOM 个节点的初始化应该放在这里（就像你的情况一样）。

在此处阅读有关 componentDidMount 的更多信息 - https://reactjs.org/docs/react-component.html#componentdidmount

Answer 2

在 React 中，你可以在“HTML”（这称为 JSX）中写入 Javascript。您不必在函数组件之外编写任何 Javascript 逻辑。

此外，您不必使用 innerHTML，而是必须使用 JSX（在 HTML 内部）编写，并使其成为 return 的实例每次循环运行的组件。

要替换 "onload"，您可以使用名为 componentDidMount 的挂钩。

关于如何在JSX（HTML里面）写循环逻辑的问题，here is a link to a similar question.

javascript 中 html 内的循环函数（React）

Loop function inside html in javascript (React)

html

javascript

three.js

reactjs

grommet