Question

这是在渲染中映射函数的正确方法

这是我的渲染代码。

render() {
const { boardList } = { ...this.props.storyboardList };
const widgetListData = [...this.props.storyboardList.boardList].map(x => x.widgetList);
widgetListData.map((widgetresult, i) => {

return (

 <div className="clearfix">
   {this.state.isHidden ? (
  <div className="widget-list-wrapper clearfix">
    {this.state.widgetsList.length >= 0 ? (
   <div>
   <section className="section-break">
     {this.renderWidgets(widgetresult)}
    </div>
    </div>
    </section>
    )
    }
    }

Answer 1

这样可以节省成本。您无需将其转换为对象。

let widgetresult = {}; 
for (let i = 0; i < widgetListData.length; i++) { 
    widgetresult = widgetListData[i]; 
}

创建小部件时需要使用数组并映射：

var widgets = widgetListData.map((widgetresult, i) => {
    //then call your widget builder below
    renderWidgets(widgetresult);
}

在渲染中

{widgets}

Answer 2

首先，由于您仅将状态用于渲染目的，因此不需要使用扩展语法来克隆它。如果要修改状态，则需要克隆

其次，你没有从渲染中返回任何东西

第三，您的语法不正确，因为您没有正确关闭标签或从条件渲染中返回null。

render() {
     const { boardList } = this.props.storyboardList;
     const widgetListData = boardList.map(x => x.widgetList);
     // note the return statement here
     return (
       <div>
       {widgetListData.map((widgetresult, i) => {
          return (
               <div className="clearfix">
                   {this.state.isHidden ? (
                      <div className="widget-list-wrapper clearfix">
                          {this.state.widgetsList.length >= 0 ? (
                               <div>
                                  <section className="section-break">
                                     {this.renderWidgets(widgetresult)}
                                  </section>
                                </div>
                           ) : null}
                      </div>
                   ): null}
              </div>
          )
    })}
    </div>
   )
}

map-reactjs时出现一些语法错误

2 个答案: