У меня есть список языков, и я хочу, чтобы каждый из них отображался в виде кнопок в столбце внутри div. Я хочу, чтобы иметь возможность отображать их на основе переменной, которую я установил, buttonsPerColumn.

Например, если у меня 40 языков и четыре столбца, я буду отображать 10 кнопок на столбец. Если у меня 36 языков, я буду рендерить 10 кнопок для первых трех и 6 для остальных. Однако я не знаю, как это сделать. Я запустил консоль желаемого результата, но мне бы хотелось, чтобы это было в форме кнопки. Как я могу создать все div и столбцы и кнопки, которые мне нужны в моем методе, а затем вывести их все сразу?

CSS

.languageList { position: absolute; height: 35%; width: 25%; left: 43%; top: 15%; background-color: #b6bbf4; display: flex; justify-content: space-between; } .languageColumn { position: relative; width: 25%; height: 100%; background-color: red; } 

languagelist.jsx

 class LanguageList extends Component { render() { this.renderButtons(); return ( {amp}lt;React.Fragment{amp}gt; {amp}lt;div className="languageList"{amp}gt; {amp}lt;div className="languageColumn" /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/React.Fragment{amp}gt; ); } renderButtons = () ={amp}gt; { let buttonsPerColumn = 6; const languages = LanguageList.getLanguages(); const myArray = LanguageList.arrayFromObject(languages); var i, language; let column = 0; for (i = 0; i {amp}lt; myArray.length; i  ) { language = myArray[i]; console.log("Render "   language   " in column "   column); if (i == buttonsPerColumn) { column  ; buttonsPerColumn  = buttonsPerColumn; } } }; static arrayFromObject = object ={amp}gt; { var myArray = []; var key; for (key in object) { myArray.push(key); } return myArray; }; static getLanguages = () ={amp}gt; { return { Azerbaijan: "az", Albanian: "sq", Amharic: "am", English: "en", Arabic: "ar", Armenian: "hy", Afrikaans: "af", Basque: "eu", German: "de", Bashkir: "ba", Nepali: "ne" }; }; } 

Ссылка на код песочницы:

https://codesandbox.io/s/practical-chatelet-bq589

Попробуй это:

 import React, { Component } from "react"; class LanguageList extends Component { render() { return ( {amp}lt;React.Fragment{amp}gt; {amp}lt;div className="languageList"{amp}gt;{this.renderButtons()}{amp}lt;/div{amp}gt; {amp}lt;/React.Fragment{amp}gt; ); } renderButtons = () ={amp}gt; { const buttonsPerColumn = 6; const languages = LanguageList.getLanguages(); const myArray = LanguageList.arrayFromObject(languages); const columns = []; for (let i = 0; i {amp}lt; myArray.length; i  ) { const columnIndex = Math.floor(i / buttonsPerColumn); if (!columns[columnIndex]) columns[columnIndex] = []; columns[columnIndex].push( {amp}lt;button className="languageButton"{amp}gt;{myArray[i]}{amp}lt;/button{amp}gt; ); } return columns.map((singleColumn, index) ={amp}gt; ( {amp}lt;div key={index} className="languageColumn"{amp}gt; {singleColumn} {amp}lt;/div{amp}gt; )); }; static arrayFromObject = object ={amp}gt; { var myArray = []; var key; for (key in object) { myArray.push(key); } return myArray; }; static getLanguages = () ={amp}gt; { return { Azerbaijan: "az", Albanian: "sq", Amharic: "am", English: "en", Arabic: "ar", Armenian: "hy", Afrikaans: "af", Basque: "eu", German: "de", Bashkir: "ba", Nepali: "ne" }; }; } export default LanguageList; 
boikevich

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,