1

我想在 Html 中循环使用具有不同输入的函数 SliderComponent 以创建多个组件。我在网上找到了这个解决方案，我们使用“id”和“getElementById”构建字符串并以 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;

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

4

2 回答 2

0

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

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

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

于 2021-11-04T15:51:40.617 回答
0

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

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

要替换它，"onload"您可以使用一个名为componentDidMount的钩子。

至于如何在 JSX 中（在 HTML 中）编写循环逻辑的问题， 这里有一个类似问题的链接。

于 2021-11-04T18:10:14.123 回答