Как создать динамическую строку с помощью цикла в JSX?
Я использую react-bootstrap и хочу воспроизвести эту структуру:
<div class = "row">
<div class = "col-lg-3"></div>
<div class = "col-lg-3"></div>
<div class = "col-lg-6"></div>
</div>
<div class = "row">
<div class = "col-lg-6"></div>
<div class = "col-lg-3"></div>
<div class = "col-lg-3"></div>
</div>
У меня есть список статей, которые должны отображаться в столбцах выше, если вы посмотрите внимательно, вы увидите, что каждая строка начинается с другого столбца, первая с 3, вторая с 6 и так далее...
Поэтому я написал:
<Container>
{articles.map((art, i) =>
(i + 1) % 3 === 0 ? (
<Row>
{" "}
<></>
<BlogItem index = {i} colNum = {3} art = {art} />{" "}
</Row>
) : (
<></>
)
)}
</Container>
но это создает другую структуру:
что я сделал не так?
BlogItem
const BlogItem = ({ index, colNum, art }) => {
const intl = useIntl()
return (
<div
className = {(index + 1) % colNum === 0 ? "col-lg-6" : "col-lg-3"}
key = {index}
>
<Link to = {`/blog/${art.slug}`}>
<Card className = "card-background">
<div
className = "full-background"
style = {{
backgroundImage: `url(${process.env.API_URL}${art.featured_image.url})`,
}}
></div>
<Card.Body>
<div className = "content-bottom">
<div className = "card-category">
{Localization(art.category.name, intl.locale)}
</div>
<Card.Title>{Localization(art.name, intl.locale)}</Card.Title>
</div>
</Card.Body>
</Card>
</Link>
</div>
)
}
@DavidFrederick проверьте обновление. BlogItem просто отображает структуру статьи.
Ответы 1
Вам нужно сделать еще один цикл для ваших BlogItems. Для каждой строки вам нужно 3 элемента блога. Внешняя карта отвечает за строки, внутренняя карта отвечает за элементы блога.
Чтобы получить чередующиеся имена классов для ширины столбцов, вы можете передать новую опору, которая сообщает BlogItem, находится ли строка, в которой он находится, на ровном месте или нет.
<Container>
{articles.map((art, i) =>
(i + 1) % 3 === 0 ? (
<Row>
{" "}
<></>
{Array(3).fill().map((el, index) => {
return <BlogItem index = {index} even = {i % 2 === 0} colNum = {3} art = {art} />
})}
{" "}
</Row>
) : (
<></>
)
)}
</Container>
const BlogItem = ({ index, colNum, art, even }) => {
const intl = useIntl();
let wrapperClass;
if (even && index === 0 || !even && index === 2) {
wrapperClass = "col-lg-6";
} else {
wrapperClass = "col-lg-3";
}
return (
<div
className = {wrapperClass}
key = {index}
>
<Link to = {`/blog/${art.slug}`}>
<Card className = "card-background">
<div
className = "full-background"
style = {{
backgroundImage: `url(${process.env.API_URL}${art.featured_image.url})`,
}}
></div>
<Card.Body>
<div className = "content-bottom">
<div className = "card-category">
{Localization(art.category.name, intl.locale)}
</div>
<Card.Title>{Localization(art.name, intl.locale)}</Card.Title>
</div>
</Card.Body>
</Card>
</Link>
</div>
)
}
Спасибо за это, но как я могу отображать разные начальные столбцы для каждой созданной строки? Например: col-lg-3 второй, col-lg-6
Не уверен, что полностью понимаю. Вы имеете в виду изменить ширину столбца первого элемента в каждой строке? Например. className = "col-lg-{dynamicValue}" ?
Я имею в виду {dynamicValue}. Проверьте мой пример в вопросе, с вашим кодом всегда col-lg-3, но он должен чередоваться между col-lg-3 и col-lg-6 для каждой новой строки.
Я обновил свой ответ до того, что, как я думаю, вы хотите.
Это невозможно узнать без вашего кода. Что в BlogItem? И как выглядят статьи?