我如何使用三元运算符在不同位置显示不同元素 Reactjs

Question

我有以下设置。我有一个配置文件，我在其中定义 postsPerPage: 2

在我的主页上，我显示 posts 关于每页值的 posts。我需要按以下方式显示 posts。

https://prnt.sc/qbrtka
https://prnt.sc/qbru7k

所以我需要实现的是，如果已经显示了一个 post，则使用模板 2，否则使用模板 1。（第一个post左边是图片，右边是文字）（第二个 post 右边是图片，左边是文字）我确实有模板工作，我需要逻辑

我有以下变量可以使用

const rowsPerPage = postsPerPage;
const totalResult = blogposts.length;

我尝试创建一个像

这样的新变量

const active = rowsPerPage - 1;

并使用active作为三元元素

 {active > 1 ? (

但遗憾的是我无法理解逻辑。

此致。

Answer 1

我假设您正在遍历帖子列表并呈现它们。您可以这样做，以便根据列表中的位置使用不同的模板：

{this.state.posts.map((post, index) => {
    const isEven = index % 2 === 0
    return isEven
      ? <Template1 key={index} post={post} />
      : <Template2 key={index} post={post} />
}}

此示例为偶数帖子呈现 Template1，为奇数帖子呈现 Template2。

或者，只让第一个不同：

{this.state.posts.map((post, index) => {
    return index === 0
      ? <Template1 key={index} post={post} />
      : <Template2 key={index} post={post} />
}}

我如何使用三元运算符在不同位置显示不同元素 Reactjs

How can i use ternary operator to display different elements in different positon Reactjs

reactjs

next.js