如何从父 div 向所有子 div 绘制箭头？答案

【问题标题】：How to draw an arrow from a parent div to all children divs?如何从父 div 向所有子 div 绘制箭头？
【发布时间】：2020-06-16 00:44:28
【问题描述】：

我有一个可重用的 React 列表组件，它可以有嵌套的子元素，我想绘制一个从父 div 到所有直接子 div 的箭头，如下图所示。

List Component Image

这是一个嵌套列表组件的示例：

import React from 'react';
import ListElement from './ListElement.js';

const List = () => (
  <>
    <ListElement>
      <ListElement>
        <ListElement>
          <ListElement />
          <ListElement>
            <ListElement />
          </ListElement>
        </ListElement>
        <ListElement />
      </ListElement>
      <ListElement />
    </ListElement>
    <ListElement />
  </>
);

export default List;

ListElement 组件看起来像这样：

    import React from 'react';

    const ListElement = props => {
      const indentationStyle = { paddingLeft: `${3 * props.indent}rem`,
      position: 'relative'};

      const lineStyle = {
        left: `${2 + 3 * (props.indent - 1.2)}rem`,
      };

      const tile = (
        <div style={indentationStyle}>
          {props.indent > 0 ? (
            <div className={'arrow-line-container'} style={lineStyle}>
              <div className={'arrow-line'}/>
              <div className={'curve-arrow-line'}/>
            </div>
          ) : null}
          <div
            style={{
              border: '1px solid black',
              padding: '1rem',
              marginBottom: '1rem',
            }}
          >
            I am a ListElement
          </div>
        </div>
      );

      const getChildren = () => {
        let elements = React.Children.toArray(props.children);

        // increase indent prop of each child and assign what number child it is in the list
        elements = elements.map((element, index) => {
          return React.cloneElement(element, {
            ...element.props,
            indent: props.indent + 1,
            childNumber: index,
          });
        });
        return elements;
      };

      const childTiles = <div className={'child-tile'}>{getChildren()}</div>;

      const arrowStyle = {
        backgroundPosition: `${1.3 + 3 * (props.indent - 1)}rem`,
      };

      return (
        <>
          <ul className={'no-bullet'}>
            <li
              className={props.indent === 0 ? 'no-arrow' : 'arrow'}
              style={arrowStyle}
            >
              {tile}
            </li>
            {props.children ? childTiles : null}
          </ul>
        </>
      );
    };

    ListElement.defaultProps = {
      childNumber: 0,
      indent: 0,
    };

    export default ListElement;

css 看起来像这样：

ul.no-bullet {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.arrow-line {
  border-left: 2px solid #6a6969;
  content: "";
  position: absolute;
  height: 65%;
}

li.arrow {
  background: url("./arrow.png") no-repeat;
}

li.no-arrow {
  display: block;
}

目前，我正在使用 <li> 元素创建列表，并将项目符号更改为箭头的图像。我想从父母那里画线并将它们附加到每个孩子的箭头上。我正在努力计算线的正确高度和线顶部的位置。任何建议表示赞赏。

这是 Plunker 的链接：https://plnkr.co/edit/GFrriWfJyeur7MRh?open=Hello.js&deferRun=1&preview

【问题讨论】：

标签： javascript html css reactjs html-lists

【解决方案1】：

我设法通过仅在最后一个孩子处画一条线并使用offsetTop 和getBoundingClientRect().height 来计算箭头线的位置和高度来找到解决方案。这里的工作解决方案：https://plnkr.co/edit/SFzgiZi1dckRa79C

【讨论】：