ReactJs-带有垂直线的列表视图。这个怎么画？

Question

如上图所示，列表中的每个数字（1,2,3…）都有一条垂直线。我们如何在react js中实现这一点？

Answer 1

您可以通过列表进行映射，并使用索引作为映射函数的第二个参数：https://stackoverflow.com/a/38364482/5709697

但是索引从0开始，所以您可以在索引中添加1。

圆圈本身和线条连接起来就是CSS的工作

Answer 2

您可以使用Array.map（）呈现简单列表（ul和lis），并使用CSS计数器和伪元素进行编号：

const data = [1, 2, 3, 4, 5, 6];

const Demo = ({ items }) => (
  <ul>
    {
      items.map(key => (
        <li key={key}>item{key}</li>
      ))
    }
  </ul>
);

ReactDOM.render(
  <Demo items={data} />,
  demo
);
  

ul {
  counter-reset: list;
  border-left: 2px solid lightgrey;
  margin: 1em;
  padding: 0;
}

ul li {
  list-style: none;
  margin: 0 0 0.5em 0;
  padding: 0;
}

ul li:before {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin: 0 0.5em 0 -0.65em;
  border-radius: 50%;  
  content: counter(list);
  text-align: center;
  background: lightgrey;
  counter-increment: list;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>