在 Reactjs 中渲染每个数组项？-解网

问：

尝试渲染我的generateSeats功能中的每个项目，但我目前只渲染一个座位。我知道我的第一个函数应该返回一个数组，但是在屏幕上呈现数组中的每个项目都让我难住了。

const generateSeats = () => {
    let numRow = 8;
    let numColumn = 3;
    let rowArray = [];
    let start = 1;
    let reachnine = false;

    for(let i=0;i<numRow;i++) {
        let columnArray = [];
        for(let j=0;j<numColumn;j++) {
            let seatObject = {
                number : start,
                taken : Boolean(Math.round(Math.random())),
                selected: false, 
            }
            columnArray.push(seatObject);
            start++;
        }
        if(i==3){
            numColumn += 2
        }
        if(numColumn <9 && !reachnine) {
            numColumn +=2;
        } else {
            reachnine=true;
            numColumn -= 2;
        }
        rowArray.push(columnArray)
    }
    return rowArray
}

const PurchaseTicket = () => {
  return (
    <div className='w-full h-full  overflow-auto scrollbar-hide'>
        <div className='w-full h-full flex flex-1 bg-black'>
            <div className='bg-white w-[12px] h-[12px] rounded-t-[10px]'>{generateSeats}       
            </div>
        </div>
    </div>
  )

reactjs arraylist 顺风-css

return (
    <div className="w-full h-full  overflow-auto scrollbar-hide">
      <div className="w-full h-full flex flex-1 bg-black">
        {generateSeats().map((row) => {
          return row.map((seat) => {
            return (
              <div className="bg-white w-[12px] h-[12px] rounded-t-[10px]">
                {/*Here you can access every value by seat.<value>*/}
                {seat.number}
              </div>
            );
          });
        })}
      </div>
    </div>
  );

在 Reactjs 中渲染每个数组项？

Rendering every array items in Reactjs?

评论

评论