提问人：kenton 提问时间：6/30/2022 最后编辑：Ferran Buireukenton 更新时间：7/9/2022 访问量：110
在 React 中加载两列中的视频数组
Loading an array of videos in two columns in React
问：
我正在尝试让视频按顺序在页面下每行加载两个视频，但我无法弄清楚如何。目前，我让它们在一列中从 contentful 加载：
const VideoPage = ({ data }) => {
return (
<div>
<Layout>
<Head title="Videos"/>
<div className={videoStyles.container}>
{data.allContentfulVideoEmbed.nodes.map((node) => {
return (
<div>
<div className={videoStyles.videoWrapper}
dangerouslySetInnerHTML={{ __html: node.markdownContent.childMarkdownRemark.html }}
/>
<div className={videoStyles.titles}>
<p>{node.title}</p>
</div>
</div>
);
})}
</div>
</Layout>
</div>
)
}
有谁知道如何去做？
答：
0赞
Oliver Heward
7/1/2022
#1
只需将它们放入一个有 2 列的网格中，然后每个循环项目将被放置在每行的 1 - 2 列中。例如，使用 Tailwindcss
const VideoPage = ({ data }) => {
return (
<div>
<Layout>
<Head title="Videos"/>
<div className="grid grid-cols-2">
{data.allContentfulVideoEmbed.nodes.map((node) => {
return (
/**
* Every nth 1 will be column 1
* Every nth 2 will be column 2
*/
<div>
<div className={videoStyles.videoWrapper}
dangerouslySetInnerHTML={{ __html: node.markdownContent.childMarkdownRemark.html }}
/>
<div className={videoStyles.titles}>
<p>{node.title}</p>
</div>
</div>
);
})}
</div>
</Layout>
</div>
)
}
评论
0赞
kenton
7/2/2022
有没有办法在没有顺风的情况下做到这一点，也许是使用样式组件或 scss？
0赞
Oliver Heward
7/6/2022
是的，当然，Tailwind 只是使用类名对 css 的抽象。你只需要做这样的事情grid-template-columns: repeat(2, 1fr);
评论