Горизонтальное выравнивание карты с использованием функции карты ReactJS

Я пытаюсь выровнять горизонтальную карту, используя сетку с функцией react-bootstrap и map.

Я использую избыточность для передачи данных через реквизит, поэтому я создаю JSON для его перемещения с помощью функции Map

это часть моего кода

 render() {
    //const { tablaCliente } = this.state
    //const { isLoading } = this.state
    const { entity } = this.props;

    return (
        <div>
            <Header></Header>
            <div className = "col-xs-4">
                <a className = "btn btn-primary" href = "/newclient">Nuevo Cliente</a>
            </div>
            <br />
            <center>
                <Spinner animation = "border" role = "status">
                    <span className = "sr-only">Loading...</span>
                </Spinner>
            </center>
            <Container>
                {entity && entity.getAllEntities && entity.getAllEntities.length > 0 && entity.getAllEntities.map((item, index) => {
                    return (
                        <CardGroup value = {item}key = {index}>
                            <Card style = {{ width: '1rem' }} >
                                <Card.Img variant = "top" src = "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16b0e6bd8ef%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16b0e6bd8ef%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23373940%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.203125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" />
                                <Card.Body>
                                    <Card.Title> Cliente {item.name}</Card.Title>
                                    <Card.Text>
                                        {item.description}
                                    </Card.Text>
                                </Card.Body>
                                <ListGroup className = "list-group-flush">
                                    <ListGroupItem>Estado:{''}{JSON.stringify(item.state)}</ListGroupItem>
                                    <ListGroupItem>Creado por: {item.createby}</ListGroupItem>
                                </ListGroup>
                                <Card.Body>
                                    <Card.Link href = "/cliente">Card Link</Card.Link>
                                    <Card.Link href = "/cliente">Editar</Card.Link>
                                </Card.Body>
                            </Card>
                        </CardGroup>)
                })}
            </Container>
        </div>
    );
}

reactjs react-redux react-bootstrap

03.06.2019 17:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

3 108

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не использую react-bootstrap, но вы можете добиться этого, выполнив

<Container>
  <div class='row'>
  {this.map(value => {
    return (
      <div class='col-md-6'>
        <Card />
      </div>
    )
  });}
  </div>
</Container>

Это должно работать

Оберните функцию карты в ряд и возвращаемый jsx в колонка.

И не просто пишите всю логику в jsx, используйте функции или компоненты.

03.06.2019 20:51