时间戳

首页 > 解决方案 > jsx中的条件交替父标签

reactjs - jsx中的条件交替父标签

问题描述

用例：


array.map((field, index) =>{
  const Wrapper = index % 2 === 0 ? <RowWrapper> : <React.Fragment>
  return (
    <Wrapper>
      <Col md={4}>
      </Col>
      <Col md={2}>
      </Col>
    </Wrapper>
  );
})

预期输出：

<RowWrapper>
  <Col md={4}>
  </Col>
  <Col md={2}>
  </Col>
  <Col md={4}>
  </Col>
  <Col md={2}>
  </Col>
</RowWrapper>

在上述场景中。基本上我希望 map 返回一个开始RowWrapper标签但不返回结束标签，直到我映射了两个字段。

标签： reactjsconditional-statementsjsx

解决方案

不幸的是，我不相信 JSX 可以完全以这种方式运行，其中关闭标记是有条件地呈现的。map但是，如果您巧妙地使用回调，输出仍然可以实现：

array.map((field, index) =>{
  if (index % 2 === 0) {
      return (
        <RowWrapper>
          <Col md={6}>current content is {array[index]}</Col>
          <Col md={6}>next index content is {array[index+1]}</Col>
        </RowWrapper>
      );
  }
  return null; // just skip if this isn't an even numbered index
})

我还没有测试过，但类似的东西应该可以完成你想要的输出。显然，您希望添加对非单类场景的检查。

推荐阅读