时间戳

首页 > 解决方案 > 我可以让二维码出现在 4 行中吗

reactjs - 我可以让二维码出现在 4 行中吗

问题描述

这是当前显示 qr 码的方式我正在尝试使用 React 制作可打印尺寸的 QR 码表。

我将生成的二维码存储在一个数组中。然后使用 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>
                </>
              );
            })}
</>

标签： reactjs

解决方案

可以用来<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>
  );
}

希望这可以帮助！！快乐编码

推荐阅读