我可以让二维码出现在4个项目的行中吗？

Question

​

我正在尝试用React制作可打印大小的二维码。

我将生成的二维码存储在一个数组中。然后使用map()函数提取这些值。

    var value = [];

    var up = this.state.MonoQuantity;
    for (var i = 0; i < up; i++) {
      var rando = randomstring.generate(3);
      value.push(this.state.Lotno + i + rando + this.state.mReward);
    }
    return value;
  };

....

<>
  {this.generateMono().map(n => {
        return (
                <>
                  <tr key={n} style={{ listStyleType: "none" }}>
                    <QRCode value={n} size={70} level={"H"} />
                  </tr>
                  <tr style={{ listStyleType: "none" }}>{n}</tr>
                </>
              );
            })}
</>

Answer 1

您可以使用<td>在一行中呈现

试一下这个：

<tr>
{this.generateMono().map(n => {
        return (
                <>
                  <td key={n} style={{ listStyleType: "none" }}>
                    <QRCode value={n} size={70} level={"H"} />
                  </td>

                </>
              );
            })}
</tr>

要在每行中创建4个元素的元素块，您可以执行类似以下工作示例的操作：https://codesandbox.io/s/happy-bash-xxgfj

let i,
    j,
    arr,
    chunk = 4; // number of element required in each row
let chunkedData = [];

const data = this.generateMono();

for (i = 0, j = data.length; i < j; i += chunk) {
  arr = data.slice(i, i + chunk);

  chunkedElements.push(
      <tr>
        {arr.map(n => {
          return <td><QRCode value={n} size={70} level={'H'}/></td>;
        })}
      </tr>,
  );
}

render;
{
  return (
      <div className="App">

        {chunkedData}

      </div>
  );
}

希望这能有所帮助！！快乐编码

Answer 2

<tr>

{this.generateMono().map(n => {
        return (
                  <td key={n} style={{ listStyleType: "none" }}>
                    <QRCode value={n} size={70} level={"H"} />
                  </td>

              );
            })}
</tr>