Как мог бы делать loop, который повторялся бы с датой в Json в моем случае?

Добрый вечер, у меня есть компонент в react и было нужно, чтобы с json, чтобы он принес имя, и ссылка для изображения смогла показывать это во мне div.

import React from 'react';

class Content extends React.Component {
  render() {
     return ( 
 
<div className="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div className="hovereffect">
        <img className="img-responsive" src="https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/how-to-setup-website.jpg" alt="Name" />
            <div className="overlay">
                <h2>Jam3 Web Site</h2>
                <p> 
					<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec blandit nibh. Suspendisse potenti. Nulla vitae eleifend leo, sed gravida nulla.</b>
				</p> 
				<p> 
					<a href="#">VIEW DEMO</a>
				</p> 
            </div>
    </div>
</div>


     );
  }
}

export default Content;

Каковым был бы подходящий способ делать repeat здесь?

0
задан 11.01.2017, 16:59
0 ответов

Прежде всего данные должны содержаться в state или в properties компонента независимо, если ты получаешь их от услуги REST, или если это данные, произведенные самим приложением front-end, в случае когда получают от услуги тогда дебет обновлять state компонента с данными, которых ты получаешь от вызова ajax.

Потом ты можешь показывать статьи следующего способа. (только я поместил значимый код)

import React from 'react';

class Content extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [{nombre: 'Nombre1', enlace: 'www.ejemplo.com/img1.jpg'}, {nombre: 'Nombre2', enlace: 'www.ejemplo.com/img2.jpg'}]
        }
    }

    render() {
        let itemsView = [];

        this.state.items.forEach(function(item){
            itemsView.push(
                <li>
                    <h1>{item.nombre}</h1>
                    <img src={item.enlace}/>
                </li>
            )
        });

        return (
            <div>
                <ul>
                    {itemsView}
                </ul>
            </div>
        );
    }
}

export default Content;

Чтобы получать данные с услуги REST, прочитай мой ответ на этот вопрос, это что-то различное, но в этом ответе то, что ты ищешь

https://es.stackoverflow.com / в / 41292/25849

1
ответ дан 03.12.2019, 17:46
  • 1
    Карлос, твой код возвращает ошибки в bundle –  11.01.2017, 17:48
  • 2
    И если recivo с услуги REST, но ta это делаю я ниже, сейчас он хотел способствовать сначала тому, чтобы оно функционировало с json, произведенным в руку как для testear, и потом способствовать тому, чтобы он присоединился с REST –  11.01.2017, 17:49
  • 3
    @SantiagoD' Antuoni была ошибка в forEach, он не ссылался на свойство статьи state, протестируй это сейчас, если ты они получаешь от услуги REST то, что ты должен делать, это mutar state меняя свойство статьи на данные, которых ты получаешь от услуги –  11.01.2017, 18:08

Теги

Похожие вопросы