使用 Semantic-ui-react 包的 Reactjs 地图网格答案

【问题标题】：Reactjs map grid using Semantic-ui-react package使用 Semantic-ui-react 包的 Reactjs 地图网格
【发布时间】：2018-02-17 00:43:53
【问题描述】：

我想通过语义-ui-react 制作具有 3 列的网格。

实际上，我使用 .map 函数来制作如下列表。

const JourneyList = (props) => (
<Grid colums={3} divided>
    {props.journies.map((journey) => (
        <JourneyListItem {...journey} key={journey.JourId} />
    ))}
</Grid>

)

并且列表是从

调用的

class JourneyDashboard extends React.Component {
render() {        
    return (
        <div>
            <div className="container-sort">
                <Link to='/create'><button>+New Journey</button></Link>
            </div>
            <div className="container-list">
                <JourneyList />
            </div>
        </div>
    )
}

}

来了。

const JourneyListItem = ({ JourId, Title, StartDate, EndDate, Note }) => (
<Card.Group>
    <Card>
        <Card.Content as={Link} to={`/edit/${JourId}`}>
            <Image src='../../images/nzflag.png' />
            <Card.Header>
                {Title}
            </Card.Header>
            <Card.Meta>
                {moment(StartDate).format('DD. MMM. YYYY')} to {moment(EndDate).format('DD. MMM. YYYY')}
            </Card.Meta>
            <Card.Description>
                {Note}
            </Card.Description>
        </Card.Content>
    </Card>
</Card.Group>

)

如何使用 .map 功能在 3 列中绘制网格？帮我。谢谢。

【问题讨论】：

标签： css reactjs react-redux semantic-ui semantic-ui-react

【解决方案1】：

Grid system of semantic-ui 适用于 16 列基础。
所以你可以做的是用<Grid.Column width={5} />包裹<JourneyListItem />
这样一来，每行不会超过 3 列：

const JourneyList = (props) => (
  <Grid colums={3} divided>
    {props.journies.map((journey) => (
      <Grid.Column width={5}>
        <JourneyListItem {...journey} key={journey.JourId} />
      </Grid.Column>
    ))}
  </Grid>
);

使用您的代码运行示例：

const { Grid, Card, Link, Image } = semanticUIReact; // import
const journies = [
  { JourId: 1, Title: 'Nepal', StartDate: '2018-02-20', EndDate: '2018-02-25' },
  { JourId: 1, Title: 'India', StartDate: '2018-05-05', EndDate: '2018-05-10' },
  { JourId: 1, Title: 'Thailand', StartDate: '2018-07-15', EndDate: '2018-07-22' },
  { JourId: 1, Title: 'South America', StartDate: '2019-02-10', EndDate: '2019-02-23' }
];

const JourneyList = (props) => (
  <Grid colums={3} divided>
    {props.journies.map((journey) => (
      <Grid.Column width={5}>
        <JourneyListItem {...journey} key={journey.JourId} />
      </Grid.Column>
    ))}
  </Grid>
);

const JourneyListItem = ({ JourId, Title, StartDate, EndDate, Note }) => (
  <Card.Group>
    <Card>
      <Card.Content as={Link} to={`/edit/${JourId}`}>
        <Image src='http://nadirkeval.com/wp-content/uploads/2014/11/longroad.jpg' />
        <Card.Header>
          {Title}
        </Card.Header>
        <Card.Meta>
          {moment(StartDate).format('DD. MMM. YYYY')} to {moment(EndDate).format('DD.MMM.YYYY')}
        </Card.Meta>
        <Card.Description>
          {Note}
        </Card.Description>
      </Card.Content>
    </Card>
  </Card.Group>
)

class JourneyDashboard extends React.Component {
  render() {
    return (
      <div>
        <div className="container-list">
          <JourneyList journies={journies} />
        </div>
      </div>
    )
  }
}

ReactDOM.render(<JourneyDashboard />, document.getElementById('root'));

<script src="https://cdn.jsdelivr.net/npm/moment@2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-react/0.78.2/semantic-ui-react.min.js"></script>
	<div id="root"></div>

【讨论】：