[筆記] React 隨手記 (React 應用篇.map)


Posted by stella572322 on 2021-05-06

  • 在畫面上條列是渲染 => .map
  • 例1:
    pokemon lottery
    先 set 好 prizes 想傳入的值 (圖一)
    (圖一)每個獎項的資料
const prizeArray = [
  {
    id: 1,
    picture: 1,
    left: 133,
    top: -177,
    zindex: '0',
    width: 129,
    height: 123,
    opacity: 0.4,
    medal: null,
    percent: 21,
  },
  {
    id: 2,
    picture: 2,
    left: 276,
    top: -72,
    zindex: '2',
    width: 138,
    height: 124,
    opacity: 0.6,
    medal: null,
    percent: 21,
  },
  {
    id: 3,
    picture: 3,
    left: 445.5,
    top: -13,
    zindex: '3',
    width: 143,
    height: 139,
    opacity: 0.8,
    medal: null,
    percent: 21,
  },
];
export default prizeArray;

(圖二)引入獎項資料

export default function Carousel() {
  const [prizes, setPrizes] = useState(prizeArray);

  //useEffect(() => {
    console.log(prizes);
  }, [prizes]);
  //寫完 code 利用測試獎項資料有沒有引入成功
  return (
    <>
      <CarouselContainer>
 //在父曾標籤下,return 子層標籤 ,並把 prizes 設定的資料引入
        <CarouselItems>//父層標籤
          {prizes.map((prize) => {
            return (
              <CarouselItem
              //子層標籤
                key={prize.id}
                picture={prize.picture}
                left={prize.left}
                top={prize.top}
                zindex={prize.zindex}
                width={prize.width}
                height={prize.height}
                opacity={prize.opacity}
                medal={prize.medal}
                percent={prize.percent}
              />
            );
          })}
        </CarouselItems>
      </CarouselContainer>
    </>
  );
}

其中下方標籤關係等於 ul, li 的意思

<CarouselItems>
    <CarouselItem/>
  • 例2:
    pokemon lottery
    先 set 好 todos 想傳入的值 (圖一)
function App() {
  const [todos, setTodos] = useState([
    {
      id: 1,
      content: 'new todo',
      isDone: false,
    },
  ]);

(圖二)引入todo資料

<ul className='p-0'>
{todos.map((todo) => {
    return (
      <TodoItem
        id={todo.id}
        key={todo.id}
        content={todo.content}
        isDone={todo.isDone}
        handleChangeStatus={handleChangeStatus}
        handleDelete={handleDelete}
      />
    );
    })}
</ul>
</>
);
}

其中下方標籤關係等於 ul, li 的意思

<ul className='p-0'>
    <TodoItem/>









Related Posts

Poetry

Poetry

[Note] TypeScript: 常用型別與寫法

[Note] TypeScript: 常用型別與寫法

一看就懂的 React Native + Firebase Mobile App 入門教學

一看就懂的 React Native + Firebase Mobile App 入門教學


Comments