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

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>
    )    
}

希望对您有所帮助。

此致，巨人

编辑： 发布了正确的代码。

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

Mapping an array in Bootstrap column in Javascript/React

javascript

underscore.js

twitter-bootstrap

reactjs