在Javascript映射引导柱阵列/阵营

Question

这是我最终想达到的目标：

我看到的是，WORK呈现在左侧，在col-md-3。右边的其余部分在col-md-9中迭代。我试图复制这个设计，但是在这样做时遇到了麻烦。下面是我有：

workList(item) { 
    return (
     <section> 
      <div className="row"> 
       <div className="col-xs-3"> 
       <div className="about-title"> 
        <h1>Work</h1> 
       </div> 
       </div> 
       <div className="col-xs-9"> 
        <div className="about-body"> 
         <h3>{item.company}</h3> 
         <h4>{item.position}</h4> 
        </div> 
       </div> 
      </div> 
     </section> 
    ) 
} 

render() { 
    return (
     <div className="container"> 
      {_.chain(this.props.work).map(this.workList).value()} //this.props.work is just a JSON object that contains a list of the places I've worked at 
     </div> 
    )  
} 

这将导致以下：

这是很显然是错误的，因为我打电话WORK相同的次数作为JSON对象的长度阵列。我的问题是 - 我如何使用Bootstrap网格特别在右侧渲染数组列表？

Answer 1

你的问题是你一起生成工作和你的物品。你必须把它们分开。由于你的JSON包含你迄今为止工作过的地方，因此不需要与地点一起生成工作。

下面是一个例子：

workList(item) { 
    return (
    // generates rows in your col-9 to get the look you wanted 
    <div className="row about-body"> 
     <div className="col-xs-12"> 
      <h3>{item.company}</h3> 
      <h4>{item.position}</h4> 
     </div> 
    </div> 
    ) 
} 

render() { 
    return (
     <div className="container"> 
       <div className="row"> 

       // generate left site once 
       <div className="col-xs-3 about-title"> 
        <h1>Work</h1> 
       </div> 

       // generate right site once 
       <div className="col-xs-9">    
       {_.chain(this.props.work).map(this.workList).value()} //this.props.work is just a JSON object that contains a list of the places I've worked at 
       </div> 
      </div>   
     </div> 
    )  
} 

希望这有助于。

问候， Megajin

编辑：发布正确的代码。