Невозможно получить карточки с изображениями даже в столбцах и строках с помощью Semantic-ui-реагировать - PullRequest
Новая
       15

Невозможно получить карточки с изображениями даже в столбцах и строках с помощью Semantic-ui-реагировать

0 голосов
/ 03 апреля 2019

У меня проблемы с Semantic-ui-реагировать, и карты изображений отображаются в красивых аккуратных столбцах и строках в примере Grid на сайте SUIR. Вот мой код App до AnimalContainer до AnimalCard:

App: 

render() {
   console.log(this.state)
   return (

     <Grid>
       <Grid.Column width={1}>
       </Grid.Column>
       <Grid.Column width={14}>

     <HeaderContainer currentUser={this.state.currentUser} animals={this.state.animals} handleOpenModal={this.handleOpenModal}  />
     <Switch>
     <Route path="/users" render={(routerProps) => <UsersContainer users={this.state.users} {...routerProps}/>}/>
     <Route path="/currentUser/:id" render={(routerProps) => <UserProfile currentUser={this.state.currentUser} updateProfile={this.updateProfile}
             deleteProfile={this.deleteProfile} {...routerProps}/>}/>
       <Route path="/login" render={(routerProps) => <LoginForm login={this.login} {...routerProps}/>}/>
       <Route path="/logout" render={this.logout}/>
       <Route path="/signup" render={(routerProps) => <SignupForm signup={this.signup} avatars={this.state.avatars} {...routerProps}/>}/>
       <Route path="/animals" render={(routerProps) => <AnimalsContainer animals={this.state.animals} {...routerProps}/>}/>
       <Route path="/home" render={(routerProps) => <SightingsContainer sightings={this.state.sightings} handleOpenModal={this.handleOpenModal} editSighting={this.editSighting}
          likeSighting={this.likeSighting}  users={this.state.users} animals={this.state.animals} deleteSighting={this.deleteSighting}
           addComment={this.addComment}  currentUser={this.state.currentUser}{...routerProps} />}/>

       <Route path="/postSighting" render={(routerProps) => <PostSightingModal currentUser={this.state.currentUser} animals={this.state.animals} postSighting={this.postSighting}
        editSighting={this.editSighting} openModal={this.state.openModal} closeModal={this.handleCloseModal} {...routerProps}/>}/>


     </Switch>
     </Grid.Column>
     <Grid.Column width={1}>
     </Grid.Column>
     </Grid>
   )
 };
};

AnimalContainer: 

import React from 'react';
import { Grid } from 'semantic-ui-react'
import AnimalCard from '../components/AnimalCard'


const AnimanlContainer = props => {


  return (

      <div>

        {props.animals.map((animal, idx) => {
         return <AnimalCard key={idx} animal={animal} />
        })
      }
      </div>

  )
};

export default AnimanlContainer

AnimalCard: 

import React, { Component } from 'react';
import { Card, Image, Grid, Segment } from 'semantic-ui-react'

class AnimalCard extends Component {

  render() {

    return (



      <Card.Group centered>
      <Card>
      <Card.Content>
      <Image src={this.props.animal.image} />
      <Card.Header>name:{this.props.animal.gname}</Card.Header>
      <Card.Description>phylum:{this.props.animal.phylum}</Card.Description>
      <Card.Description>order:{this.props.animal.order}</Card.Description>
      <Card.Description>family:{this.props.animal.family}</Card.Description>
      <Card.Description>species:{this.props.animal.species}</Card.Description>
      <Card.Description>class:{this.props.animal.class}</Card.Description>
      <Card.Description>description:{this.props.animal.description}</Card.Description>


      </Card.Content>
      </Card>
      </Card.Group>
  )
  };
};

export default AnimalCard;

Независимо от того, какая комбинация <Grid>, <Gird.Row> и <Grid.Column> Я пытаюсь, это всегда при прямом вертикальном рендеринге карт.

...