Реагировать, не в состоянии pu sh html элемент без тега в массиве

Question

Я составляю массив из html элементов, чтобы потом напечатать их.

Вот так выглядит моя композиция

for (let i = 1; i < appsData.length; i++) {
        //console.log(appsData[i][0])  //name of the permission
        //console.log(appsData[i][1]) //true false
        if (i % 2 != 0) {
            appsPrint.push(<div className="row lowerlow"> </div> ) //I DONT WANT THE FINAL </div> TAG
            }
            var w = 0;
        while(w < 2){
                    appsPrint.push(<div className="col-md-6 app-div" onClick={() => this.props.history.push("'/"+appsData[i][0]+"'")}>
                        <div className="row texticon">
                            <div className="col-md-1 offset-md-1">
                                <div>
                                    <div className="appicon">
                                        <svg viewBox="0 0 32 32" >
                                            <path d="M0 2v20h32v-20h-32zM30 20h-28v-16h28v16zM21 24h-10l-1 4-2 2h16l-2-2z"></path>
                                        </svg>


                                    </div>
                                </div>
                            </div>

                            <div className="col-md-2 offset-md-2">
                                <div className="">
                                    {appsData[i][0]}
                                </div>
                            </div>

                        </div>
                    </div>)
        w++;
        i++;
        }
        if(i%2 != 0){
                    appsPrint.push(<div> </div>) //I DONT WANT THE INITIAL <div> TAG
        }


    }

Но проблема в том, что когда if (i % 2 != 0) случается, я хочу сначала открыть тег div, затем выполнить некоторые действия, а когда он закончится, закрыть тег. Проблема в том, что я, по-видимому, не могу вынести * * * * * * * * * * * * * * * * без элементов тега.

Visual Studio выдает ошибку, если я

appsPrint.push(<div className="row lowerlow"> ) appsPrint.push( </div> )

Элемент div jsx не имеет соответствующего тега

Итак, как мне это делать? Я могу преобразовать все это в строку, а затем уничтожить, но это будет грязно.

Answer 1

Я должен сказать, что вы должны использовать синтаксис ...:

appsPrint = [<div className="row lowerlow">, ...appsPrint, </div> ];

В этом случае вам просто нужно набрать sh <div>, которые вы хотите, а затем распространить их так же, как

---

Но лучший вариант сделать это - иметь правильные данные, а затем просто отобразить их для рендеринга.

Как это:

render(){
   return ( { appsData.map((obj, i) => {
       <div className="col-md-6 app-div" onClick={() => this.props.history.push("'/"+appsData[i][0]+"'")}>
                    <div className="row texticon">
                        <div className="col-md-1 offset-md-1">
                            <div>
                                <div className="appicon">
                                    <svg viewBox="0 0 32 32" >
                                        <path d="M0 2v20h32v-20h-32zM30 20h-28v-16h28v16zM21 24h-10l-1 4-2 2h16l-2-2z"></path>
                                    </svg>


                                </div>
                            </div>
                        </div>

                        <div className="col-md-2 offset-md-2">
                            <div className="">
                                {appsData[i][0]}
                            </div>
                        </div>

                    </div>
                </div>
             })}
     );
}