在 Bootstrap 网格的单元格中反应渲染对象数组

Question

我有一个组件数组，我想在不同的单元格中呈现每个元素。数组的长度可以始终不同，并且可以超过 12 个元素，这是 Bootstrap 网格系统中单元格的限制。因此，如果元素超过 12 个，我需要创建一个新行。

在我的 RENDER 方法中我有这个：

let components = this.state.elements.map(
  (currElement, index) => this.renderElement(currElement, index)
);
return (
  <div className="wrap-content container-fluid">
      <section id="box-main" className="container-fluid">
          <div className="row flex-items-xs-center">
            <div className="col-xs">
                <header>
                  <h4>{this._title}</h4>
                </header>
            </div>
          </div>   
            {components}  
      </section>
  </div>);

renderElement 方法现在渲染一行中的每个元素，但我想在一个单元格中渲染但我不知道该怎么做。 ElementItem 是呈现单个元素的组件。

renderElement(element, index)
{
  return(
    <div key={index} className="row flex-items-xs-center">
        <div  className="col-xs">
          <ElementItem element={element} propA={element.propA} template={2} />
        </div>
    </div>
  );
}

Answer 1

Christian，我不确定我是否理解你的问题。但是，如果您希望每个元素呈现在一个列（单元格）中，您必须在 row 内声明您的组件，然后指定断点。像这样：

const MainComponent = props =>{
    const elements = elements.map(element =>{
        return(<div className="col md-4"> {element} </div>);
    })
    return(
        <div className="row">
           {elements}
        </div>
    )
}

在 Bootstrap 网格的单元格中反应渲染对象数组

React render array of objects in cells of Bootstrap grid

javascript

render

jsx

twitter-bootstrap

reactjs