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返回元素，但是外部.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

1 个答案: