Question

我想通过语义 - 反应来制作有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 fucntion在3列中绘制网格？帮我。感谢。

Answer 1

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

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

<小时/> 使用您的代码运行示例：

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

Reactjs使用Semantic-ui-react包

1 个答案: