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

编辑发布了正确的代码。

在Javascript / React中的Bootstrap列中映射数组

1 个答案: