代码之家 › 专栏 › 技术社区 › Diego Unanue

带有引导列的映射

react-bootstrap redux reactjs javascript

Diego Unanue · 技术社区 · 8 年前

我使用map遍历元素列表,我想要的是每行有4个元素。这是我在课堂上的渲染部分:

render() {
    return (
      <div>
        <h1>Card List</h1>

        {this.props.items ? this.props.items.map((item) =>
          <div class="cardSection">
            <Row className="show-grid">
                <Card name={item.name} imgGold={item.imgGold}  />
            </Row>
          </div>

        ) : <div>Loading!</div>}

      </div>
    )
  }
}

我希望使用xs={4}md={4}每行4个卡组件

1 回复 | 直到 8 年前

João Cunha 8 年前

你可以这样做

const items = [
  { name: "1" },
  { name: "2" },
  { name: "3" },
  { name: "4" },
  { name: "5" },
  { name: "6" },
  { name: "7" },
  { name: "8" },
  { name: "9" },
  { name: "10" },
  { name: "11" },
];

const App = () => {
  const result = items.map((x,i) => {
      return i % 4 === 0 ? items.slice(i, i+4) : null;
  }).filter(x => x != null);

  return (
    <div>
      {result.map((result, index) => {
        return (<section key={index}>
          {result.map(item => <span>{item.name}</span>)}
        </section>);
       })}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

span {
 margin-left: 5px;
 margin-right: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

这将把你的项目数组分成4组。你甚至可以让它接受你想要的任何数字。

然后,您可以迭代并以4人一组的方式渲染它们中的每一个。

请确保您运行了代码段,以便可以看到它正在工作。

推荐文章

zuZuu · React Redux-无法设置未定义的属性(设置“value”)

4 年前

universe11 · 对伊默来说,这是正确的还是错误的?

4 年前

Huy282002 · 将redux toolkit与JS一起使用时,不能跳过在CreateSicle()中键入状态

4 年前

Mistakamikaze · React Redux |在全局Redux状态之前更新本地状态

4 年前

Kiv Daor · 当某些项具有未知值时,排序数组无法正常工作

4 年前

Chong Lip Phang · 不变性检查中间件在Redux工具包中做什么?

4 年前

geyser · React Redux toolkit-输入字段的状态管理

4 年前

Avishay Matayev · 正在获取redux的connect HOC的包装组件类型,以便与React一起使用。在不重新导入的情况下重新创建对象

4 年前

Hamed Ezati · 为什么项目会附加到redux而不是替换?

4 年前

Arash jahan bakhshan · redux未使用React 18重新呈现组件

4 年前