没有来自数组的渲染元素 - ReactJS

Question

基于 Typescript 与 ReactJS 的项目。

这是渲染代码：

return (
            <div ref={this.myRef} style={this.state.myStyle} >
              {this.state.sections.map((sectionsItem: AppI.SectionI) => {
                if (this.state.activeSection === sectionsItem.name) {
                  console.log("TEST :", sectionsItem.elements );
                  sectionsItem.elements.map((element: React.ReactElement<any>, index: number) => {
                    return <span key={index} >{element}</span>;
                  });
                }
              })}
            </div>
           );

在调试器中，我可以看到 'elements' 不为空，但它不会在 html 中呈现。

有什么建议吗？！

Answer 1

您需要一个额外的 return 语句：更改：sectionsItem.elements.map 到 return sectionsItem.elements.map：您的内部 .map returns 元素但外部 .map 没有 return 语句：

return (
        <div ref={this.myRef} style={this.state.myStyle} >
          {this.state.sections.map((sectionsItem: AppI.SectionI) => {
            if (this.state.activeSection === sectionsItem.name) {
              console.log("TEST :", sectionsItem.elements );
              return sectionsItem.elements.map((element: React.ReactElement<any>, index: number) => {
                return <span key={index} >{element}</span>;
              });
            }
          })}
        </div>
       );

没有来自数组的渲染元素 - ReactJS

No render elements from array - ReactJS

typescript

reactjs

typescript3.0