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

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

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

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

1 个答案: