Форум

s24344 · #1 (**permalink**) 13.10.2018, 08:25

Здравствуйте. Подскажите пожалуйста как мне решить следующую задачу. У меня есть некое количество json данных.

{
  "cards": [
    { "id": "1", "content": "Lorem ipsum dolor sit amet." },
    { "id": "2", "content": "Lorem ipsum dolor sit amet." },
    { "id": "3", "content": "Lorem ipsum dolor sit amet." },
    { "id": "4", "content": "Lorem ipsum dolor sit amet." },
    { "id": "5", "content": "Lorem ipsum dolor sit amet." },
    { "id": "6", "content": "Lorem ipsum dolor sit amet." },
    { "id": "7", "content": "Lorem ipsum dolor sit amet." },
    { "id": "8", "content": "Lorem ipsum dolor sit amet." },
    { "id": "9", "content": "Lorem ipsum dolor sit amet." },
    { "id": "10", "content": "Lorem ipsum dolor sit amet." },
    { "id": "11", "content": "Lorem ipsum dolor sit amet." }
  ]
}

Я получаю эти данные и передаю через props в компонент.
Мне бы хотелось реализовать следующую логику:

// this.cardsData, это данные

ReactDOM.render(
    <NewsFeedPreviewList
        list={this.cardsData}
    />,
    document.querySelector('[data-dc-news-feed-preview-ref="primary-wrapper"]'));

NewsFeedPreviewList.js

class NewsFeedPreviewList extends Component {
  renderNewsFeedPreview = (list) => {
    let template = null;
    template = list.map((item, i) => {
      return (
          <PlayerCardRow
              key={i}
              item={item}
          />
      );
    });
    return template;
 }
 
  render() {
    return (
      <ul className="news-feed-preview__layout">
        { this.renderNewsFeedPreview(this.props.list) }
      </ul>
    );
  }
}

Мне необходимо установить по следующему принципу css классы, например: у первого будет className="item__one", у второго элемента className="item__two", у третьего className="item__three", у четвертого className="item__four". Затем, у пятого className="item__one", у шестого className="item__two", у седьмого className="item__three", у восьмого className="item__four", и далее снова замкнутый цикл: у девятого будет className="item__one" и так далее.
Подскажите пожалуйста как правильно реализовать этот алгоритм.

Malleys · #2 (**permalink**) 13.10.2018, 08:51

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div data-dc-news-feed-preview-ref="primary-wrapper"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js"></script>
	<script>
		
const { createElement, Component } = React;

class NewsFeedPreviewList extends Component {
	render() {
		return createElement("ul", {},
			this.props.list.cards.map((item, key) =>
				createElement(PlayerCardRow, { key, item, index: key })
			)
		);
	}
}

const classNames = ["item__one", "item__two", "item__three", "item__four"];

class PlayerCardRow extends Component {
	render() {
		const className = classNames[this.props.index % classNames.length];
		return createElement("div", { className }, `${this.props.item.id} ${className} ${this.props.item.content}`);
	}
}

/* data */

const list = {
  "cards": [
    { "id": "1", "content": "Lorem ipsum dolor sit amet." },
    { "id": "2", "content": "Lorem ipsum dolor sit amet." },
    { "id": "3", "content": "Lorem ipsum dolor sit amet." },
    { "id": "4", "content": "Lorem ipsum dolor sit amet." },
    { "id": "5", "content": "Lorem ipsum dolor sit amet." },
    { "id": "6", "content": "Lorem ipsum dolor sit amet." },
    { "id": "7", "content": "Lorem ipsum dolor sit amet." },
    { "id": "8", "content": "Lorem ipsum dolor sit amet." },
    { "id": "9", "content": "Lorem ipsum dolor sit amet." },
    { "id": "10", "content": "Lorem ipsum dolor sit amet." },
    { "id": "11", "content": "Lorem ipsum dolor sit amet." }
  ]
};	
		
ReactDOM.render(
	createElement(NewsFeedPreviewList, { list }),
	document.querySelector("[data-dc-news-feed-preview-ref='primary-wrapper']")
);
	</script>
	</body>
</html>

s24344 · #3 (**permalink**) 13.10.2018, 12:47

Большое спасибо за помощь.

Форум

Справочник

Discord чат

Курсы javascript