React將陣列數據映射到卡片臺的好方法

-1

我有一個對象數組。我想不通我怎麼在每一個創建多個的卡片與3張卡，如在圖像上：
React將陣列數據映射到卡片臺的好方法

下面是一個例子：

import { Card, Button, ... CardBlock } from 'reactstrap'; 

export default const Example = (props) => { 
    return (<div> 
    <CardDeck> 
     <Card> 
     <CardImg top width="100%" src="https://..." /> 
     <CardBlock> 
      <CardTitle>{data.title}</CardTitle> 
      <CardSubtitle>{data.subtitle}/CardSubtitle> 
      <CardText>{data.text}</CardText> 
      <Button>Button</Button> 
     </CardBlock> 
     </Card> 
     <Card> 
     ... 
     </Card> 
     <Card> 
     ... 
     </Card> 
    </CardDeck> 

    <CardDeck> 
     ... 
    </CardDeck> 
     ... 
    </div> 
); 
};

來源

2017-07-01 Taras Yaremkiv

那麼在你的代碼中不能按預期工作？你能問一個具體的問題嗎？ – trixn

如果你的問題是關於如何迭代你的數組，那麼你可以使用Array.prototype.map()。

用箭頭函數從react docs與map()呼叫的例子：

通過保存部件在臨時變量：

function NumberList(props) { 
    const numbers = props.numbers; 
    const listItems = numbers.map((number) => 
    <ListItem key={number.toString()} 
       value={number} /> 
); 
    return (
    <ul> 
     {listItems} 
    </ul> 
); 
}

通過使用map()直列：

function NumberList(props) { 
    const numbers = props.numbers; 
    return (
    <ul> 
     {numbers.map((number) => 
     <ListItem key={number.toString()} 
        value={number} /> 
    )} 
    </ul> 
); 
}

編輯：

請勿渲染多個<CardDeck>組件。取而代之的是調整你的css，這樣當有更多的三個時，<Card>會換行到下一行。然後，您只需將數據映射到陣列中一次，而不是再次對每個<CardDeck>進行映射。

來源

2017-07-01 22:12:18 trixn

你建議我做 items.map（...） items.map（...） items.map（...）？如果我的array.length是30個項目=>那麼我需要創建10個地圖？ –

那麼我不會提出任何建議。你沒有問一個問題，所以我猜測你到底在爭什麼。如果你的數據結構是一個數組，那麼你應該修改你的css，這樣第四張卡片就會漂浮在下一行，並且只會迭代你的結構一次。你應該設計一個組件，以便它可以渲染任意數量的卡片，而不是那種總是6或9或任何數量的固定佈局。 – trixn

好吧，如果在這種情況下React JS不能幫助我 - 那麼是的 - 只有CSS ... –

React將陣列數據映射到卡片臺的好方法

回答

相關問題