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

Question

如上图所示，有一条垂直线链接列表中的每个数字（1,2,3 ...）。我们如何在React JS中实现这一目标？

Answer 1

您可以使用ul渲染一个简单列表（li和Array.map()），并使用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>

Answer 2

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

但是索引从0开始，因此您可以将1加到索引。

圆圈本身和线条之间的联系是CSS的工作