数组中没有渲染元素 - ReactJS

【问题标题】：No render elements from array - ReactJS数组中没有渲染元素 - ReactJS
【发布时间】：2019-02-17 00:43:00
【问题描述】：

基于 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>
           );

在调试器中，我可以看到“元素”不是空的，但它不会在 html 中呈现。

有什么建议吗？！

【问题讨论】：

标签： reactjs typescript typescript3.0

【解决方案1】：

你需要一个额外的return 声明：更改：sectionsItem.elements.map 为 return sectionsItem.elements.map：您的内部 .map 返回元素，但外部 .map 没有返回语句：

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>
       );

【讨论】：