html - 渲染 div 中的按钮列

Question

我有一个语言列表，我想将它们分别呈现为列中的按钮，在 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;
}

语言列表.jsx

class LanguageList extends Component {
  render() {
    this.renderButtons();
    return (
      <React.Fragment>
        <div className="languageList">
          <div className="languageColumn" />
        </div>
      </React.Fragment>
    );
  }

  renderButtons = () => {
    let buttonsPerColumn = 6;
    const languages = LanguageList.getLanguages();
    const myArray = LanguageList.arrayFromObject(languages);
    var i, language;
    let column = 0;
    for (i = 0; i < myArray.length; i++) {
      language = myArray[i];
      console.log("Render " + language + " in column " + column);
      if (i == buttonsPerColumn) {
        column++;
        buttonsPerColumn += buttonsPerColumn;
      }
    }
  };

  static arrayFromObject = object => {
    var myArray = [];
    var key;
    for (key in object) {
      myArray.push(key);
    }
    return myArray;
  };

  static getLanguages = () => {
    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

标签： htmlcssreactjs

Answer 1

尝试这个：

import React, { Component } from "react";

class LanguageList extends Component {
  render() {
    return (
      <React.Fragment>
        <div className="languageList">{this.renderButtons()}</div>
      </React.Fragment>
    );
  }

  renderButtons = () => {
    const buttonsPerColumn = 6;
    const languages = LanguageList.getLanguages();
    const myArray = LanguageList.arrayFromObject(languages);
    const columns = [];
    for (let i = 0; i < myArray.length; i++) {
      const columnIndex = Math.floor(i / buttonsPerColumn);
      if (!columns[columnIndex]) columns[columnIndex] = [];
      columns[columnIndex].push(
        <button className="languageButton">{myArray[i]}</button>
      );
    }
    return columns.map((singleColumn, index) => (
      <div key={index} className="languageColumn">
        {singleColumn}
      </div>
    ));
  };

  static arrayFromObject = object => {
    var myArray = [];
    var key;
    for (key in object) {
      myArray.push(key);
    }
    return myArray;
  };

  static getLanguages = () => {
    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;