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

Posted 2023-03-15

【中文标题】ReactJs - 带有垂直线的列表视图。这个怎么画？

【英文标题】：ReactJs - List view with vertical lines. How to draw this?

【发布时间】：2018-12-27 11:22:23

【问题描述】：

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

【参考方案1】：

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

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

const Demo = ( items ) => (
  <ul>
    
      items.map(key => (
        <li key=key>itemkey</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>

【参考方案2】：

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

但是索引是从0开始的，所以可以给索引加1。

圆圈本身和线条，将它们连接起来是 css 工作