reactjs - 如何在 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>
但这会创建一个不同的结构:
我做错了什么?
博客项目
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>
)
}
解决方案
您需要为您的 BlogItems 做另一个循环。对于每一行,您需要 3 个 BlogItem。外部映射负责行,内部映射负责 BlogItems。
要获取列宽的交替类名,您可以传递一个新的道具,告诉 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>
)
}
推荐阅读
- discord.py - (discord.py) Client.fetch_channel() 和 Client.get_channel() 的区别
- python - BeautifulSoup 4:AttributeError:NoneType 没有属性 find_next
- merge - 在 SharePoint 2010 中合并多个列表
- c# - 调试内存映射文件
- ssl - Certbot 命令未使用 HAProxy 为 SSL 配置生成 fullchain.pem 文件
- python - python netmiko错误-在3个路由器中配置环回的代码
- openssh - SSH 身份验证在 Ubuntu 18.04 上不起作用
- ruby-on-rails - Ruby on rails WebSocket 连接到“wss://ws15.hotjar.com/api/v2/client/ws”失败:WebSocket 由于暂停而关闭
- sql - 始终加密列中的 SQL Server 错误与更新
- python - 带有张量流 tf.functions 的 cProfile