如何使用带有条件包装的 map() 函数在 JSX 中呈现数组条目

Posted 2023-02-21

【中文标题】如何使用带有条件包装的 map() 函数在 JSX 中呈现数组条目

【英文标题】：How to render array entries in JSX using map() function with conditional wrapping

【发布时间】：2018-12-19 15:16:21

【问题描述】：

我在 javascript 中有一个对象数组，我想遍历这些对象并返回一些带有引导类的 JSX，这样每行总是在其中显示 2 列。

options: [
  
    "letter":"A",
    "text": "14 March 1879"
  ,
  
    "letter":"B",
    "text": "14 March 1897"
  ,
  
    "letter":"C",
    "text": "24 May 1879"
  ,
  
    "letter":"D",
    "text": "24 June 1879"
  
]

根据我使用其他语言和模板引擎的经验，这非常简单：您只需创建一个带有row 类的打开和关闭div 标签，然后使用您的模板引擎，循环并渲染每个标签对象，直到您的循环计数器为2，您动态地结束该角色并开始一个新角色。

类似这样的：

<div class="row">
    for (var i in options) 
      if(i%2 === 0) 
        <!-- render object ... -->
        </div><!-- then end this row -->
        <div class="row"><!-- start new row -->
       else 
        <!-- render object -->
      
    
</div>

我在我的 map 函数中尝试了这个方法，它给出了一个语法错误，因为在条件通过的情况下返回的值不是有效的 JSX。

感谢您的帮助。

编辑：

最后，我想要实现的是：

如果对象数组包含 2 个对象，我应该可以像这样动态显示它：

 <div class="row">
  <div class="col-md-6">
    <div class="option correct-option">
      A <!-- that is, option.letter -->
    </div>
  </div>
  <div class="col-md-6">
    <div class="option wrong-option">
      B <!-- that is, option.letter -->
    </div>
  </div>
</div>

如果数组包含3个对象，我想实现这个：

 <div class="row">
  <div class="col-md-6">
    <div class="option correct-option">
      A <!-- that is, option.letter -->
    </div>
  </div>
  <div class="col-md-6">
    <div class="option wrong-option">
      B <!-- that is, option.letter -->
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
    <div class="option correct-option">
      C <!-- that is, option.letter -->
    </div>
  </div>
</div>

【问题讨论】：

贴出你要实现的html

【参考方案1】：

这样的事情怎么样？

options.map((option, i) => (
    i % 2 === 0 ? null : ( // skip every 2nd row
      <div class="row">
        A: option
        B: i < options.length ? options[i + 1] : null
      </div>
    )
)

【讨论】：

感谢您的回答。它有效，但返回数组的第一个元素为空。我不知道为什么，但我还没有弄清楚

【参考方案2】：

您可以使用常规 for 循环增加 i，每个循环增加 2 个，并检查第二个选项是否设置为处理长度不均匀的数组：

示例

function App() 
  const content = [];

  for (let i = 0; i < options.length; i += 2) 
    content.push(
      <div class="row">
        <div class="col-md-6">
          <div class="option correct-option">options[i].text</div>
        </div>
        options[i + 1] && (
          <div class="col-md-6">
            <div class="option correct-option">options[i + 1].text</div>
          </div>
        )
      </div>
    );
  

  return <div>content</div>;

【参考方案3】：

HTML：

结果：

验证： 适用于： 数组长度 = 0 & Array.length = n 你想要 3 Cols？...定义一个 const 而不是幻数“2”....

代码：

const options = [
  
    "letter":"A",
    "text": "14 March 1879"
  ,
  
    "letter":"B",
    "text": "14 March 1897"
  ,
  
    "letter":"C",
    "text": "24 May 1879"
  ,
];
return (
  <>
    
      Array.from(Array(Math.round(options.length / 2)).keys()).map((number, index) => 
        return (
          <div className="row">
            
                options.slice(index * 2, (index * 2) + 2).map(option=>
                  return (
                    <div className="col-md-6">
                      <div className=`option $option.true ? 'correct-option' : 'wrong-option'`>
                        option.letter-option.text
                      </div>
                    </div>
                  );
                )
              
          </div>
        );
      )
    
  </>
);