Question

我是React / Javascript的新手，我正在尝试构建一个JSX＆＃39;树＆＃39;使用循环来避免硬编码数据。

我想我的主要麻烦在于无法构建JSX零碎; Visual Studio Code需要我的顶级开放JSX标记的结束标记。在这种情况下，。但是，既然我要把它分成几块，那就不可能了。

所以我尝试取出我的逻辑并在render（）函数中使用它，在这些标记的中间有一个单独的函数调用。但这让我感到......

index.js:2178 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in div (created by Container)
    in Container (at RequestPlaceholders.js:45)
    in div (at RequestPlaceholders.js:41)
    in RequestPlaceholders (at App.js:80)
    in div (at App.js:79)
    in div (at App.js:65)
    in div (at App.js:64)
    in App (at index.js:8)

如果我没有准确地传达我的问题，我的代码就在https://github.com/runelynx/WebServiceToolkit/blob/master/src/components/RequestPlaceholders/RequestPlaceholders.js。

有人能指出我正确的方向吗？

Answer 1

您需要拨打renderPlaceholders功能。

render() {
  return (
    <div>
      <h2 className="subtitle">
        {this.props.selectedAPI} Placeholders
      </h2>
      <Container>
        {this.renderPlaceholders()}
      </Container>
    </div>
  );
}

同时更新你的for循环，你有一个无限的错误。使用 i + = 2

更改 i + 2

for (var i = 0; i < this.props.apiPlaceholders.length; i+=2)

如何使用循环构造JSX

1 个答案: