在React中回圈一個組件

import Favcheck from "./favcheck.jsx";
export default function Mensbuttons() {
  const list1 = ["test1","name1"];
  const list2 = ["test2","name2"];
  const list = [];
  list.push(list1,list2);

  return (
    
    for (let i = 0; i < list.length; i  ) {

    <>
      <div class="formcontainer">
        <form method="get" action="/mensapage" class="mensaform">
          <button type="submit" class="mensabutton">
            <div class="mensatext"> {list[i][0]</div>
          </button>
          <Favcheck />
        </form>
      </div>
    </>
  }
  );
  
}

所以我真的很確定那不是它的完成方式，但我不知道我會如何做到這一點。所以我有一個反應組件，我想回圈拋出一個帶有陣列的陣列。為了創建一個按鈕，其名稱為父陣列內的陣列元素。我不確定應該在哪里插入 for 回圈。我將不勝感激。

uj5u.com熱心網友回復：

我修改了您的代碼以使用地圖。

import React from "react";

export default function Mensbuttons() {
  const list1 = ["test1","name1"];
  const list2 = ["test2","name2"];
  const list = [];
  list.push(list1,list2);

  return (
    <>
      <div class="formcontainer">
        <form method="get" action="/mensapage" class="mensaform">
          {list.map(item => 
            (<button type="submit" name={item[1]} class="mensabutton">
              <div class="mensatext">{item[0]}</div>
            </button>
            )
          )}
        </form>
      </div>
    </>
  );
  
}

但我建議你設定如下使用名稱而不是索引。

[
  { label: "name1", value: "test1" },
  { label: "name2", value: "test2" }
]

import React from "react";

export default function Mensbuttons() {
  const listNew = [
    { label: "name1", value: "test1" },
    { label: "name2", value: "test2" }
  ];

  return (
    <>
      <div class="formcontainer">
        <form method="get" action="/mensapage" class="mensaform">
          {listNew.map(item => 
            (<button type="submit" name={item.label} class="mensabutton">
              <div class="mensatext">{item.value}</div>
            </button>
            )
          )}
        </form>
      </div>
    </>
  );
  
}

https://stackblitz.com/edit/react-1cwpnl?file=src/App.js

uj5u.com熱心網友回復：

export default function Mensbuttons() {
  const list1 = ["test1", "name1"];
  const list2 = ["test2", "name2"];
  const list = [];
  list.push(list1, list2);

  return (
    <>
      <div class="formcontainer">
        <form method="get" action="/mensapage" class="mensaform">
          {list.map((data) =>
            data.map((item) => (
              <button type="submit" class="mensabutton">
                <div class="mensatext"> {item}</div>
              </button>
            ))
          )}
        </form>
      </div>
    </>
  );
}

uj5u.com熱心網友回復：

您可以使用地圖方法。請注意，您必須為回圈中的元素設定一個關鍵屬性。

import Favcheck from "./favcheck.jsx";
export default function Mensbuttons() {
  const list1 = ["test1","name1"];
  const list2 = ["test2","name2"];
  const list = [];
  list.push(list1,list2);

  return (
    <>
    {list.map(innerArray => 
      innerArray.map(item => <div key={item} class="formcontainer">
        <form method="get" action="/mensapage" class="mensaform">
          <button type="submit" class="mensabutton">
            <div class="mensatext">{item}</div>
          </button>
          <Favcheck />
        </form>
      </div>))}
     </>
  );
  
}

標籤：反应 for循环 成分

上一篇：For回圈在R中撰寫pdf

下一篇：通知下拉選單放置到按鈕