javascript - 如何在 React 高阶组件 (HOC) 中使用 refs

Question

我有 3 个导航项，它们具有不同的标记，但都需要相同的功能——按顺序为其中的 svg paths 设置动画。听起来像是使用 HOC 的好场景。但是，我无法通过从 WrappedComponent 中的 ref 调用的 function (activePaths) 将 refs 推送到数组。我收到错误 TypeError: _this2.activePaths is not a function。这是一个有效的 codepen我试图在不使用 HOC 的情况下为单个导航项完成的任务。

这是给我错误的 HOC 代码。

export const withNavItem = WrappedComponent => class extends Component {
  constructor() {
    super();
    this.activePaths = this.activePaths.bind(this);
    this.markerPaths = [];
    this.rendered = false;
  }
  componentDidMount() {
    this.rendered = true;
    this.animatePaths();
  }

  animatePaths() {
    const { markerPaths } = this;
    // prepare stroke to be animated
    for (let i = 0; i < markerPaths.length; i++) {
      const path = markerPaths[i];
      const length = path.getTotalLength();
      path.setAttribute('strokeDasharray', length);
      path.style.strokeDashoffset = length;
    }
    // animate stroke
    const markerDrawing = anime({
      targets: markerPaths,
      strokeDashoffset: [anime.setDashoffset, 0],
      easing: 'easeInOutSine',
      duration: 400,
      delay(el, i) { return i * 150; },
      direction: 'alternate',
      loop: false,
    });
  }

  activePaths(el, linkType) {
    if (el === null || this.rendered) {
      return;
    }
    this.markerPaths.push(el);
  }

  render() {
    this.rendered = true;
    return <WrappedComponent {...this.props} />;
  }
};

export default withNavItem;




class NavItemHey extends React.Component {     
  render() {
    return (
      <div>
        <span className="letter-holder">
          <span className="letter">H</span>
          <span className="letter-strokes letter-strokes--h">
            <span className="h-left-stroke letter-stroke">
              <svg className="letter-stroke__svg" viewBox="0 0 106 306">
                <path ref={el => this.activePaths(el)} className="letter-stroke__svg-path" d="M59,0c0,0,0.1,114-0.5,195.8S58,314.5,58,314.5" />
              </svg>
            </span>
            <span className="h-middle-stroke letter-stroke">
              <svg className="letter-stroke__svg" viewBox="0 0 118 106">
                <path ref={el => this.activePaths(el)} className="letter-stroke__svg-path" d="M0.1,58c0,0,33.5-0.1,66.8,0.5s63.2,0.5,63.2,0.5" />
              </svg>
            </span>
            <span className="h-right-stroke letter-stroke">
              <svg className="letter-stroke__svg" viewBox="0 0 109 304">
                <path ref={el => this.activePaths(el)} className="letter-stroke__svg-path" d="M59,0c0,0,0.1,114-0.5,195.8S58,314.5,58,314.5" />
              </svg>
            </span>
          </span>
        </span>

        <span className="letter-holder letter-e">
          <span className="letter">E</span>
          <span className="letter-strokes letter-strokes--e">
            <span className="e-left-stroke letter-stroke">
              <svg className="letter-stroke__svg" viewBox="0 0 106 316">
                <path ref={el => this.activePaths(el)} className="letter-stroke__svg-path" d="M59,0c0,0,0.1,114-0.5,195.8S58,314.5,58,314.5" />
              </svg>
            </span>
            <span className="e-top-stroke letter-stroke">
              <svg className="letter-stroke__svg" viewBox="0 0 134 105">
                <path ref={el => this.activePaths(el)} className="letter-stroke__svg-path" d="M0.2,51c0,0,24.5-0.1,57.8,0.5s75.2,0.5,75.2,0.5" />
              </svg>
            </span>
            <span className="e-middle-stroke letter-stroke">
              <svg className="letter-stroke__svg" viewBox="0 0 127 103">
                <path ref={el => this.activePaths(el)} className="letter-stroke__svg-path" d="M0.2,51c0,0,24.5-0.1,57.8,0.5s75.2,0.5,75.2,0.5" />
              </svg>
            </span>
            <span className="e-bottom-stroke letter-stroke">
              <svg className="letter-stroke__svg" viewBox="0 0 136 106">
                <path ref={el => this.activePaths(el)} className="letter-stroke__svg-path" d="M0.2,51c0,0,24.5-0.1,57.8,0.5s75.2,0.5,75.2,0.5" />
              </svg>
            </span>
          </span>
        </span>

        <span className="letter-holder letter-y">
          <span className="letter">Y</span>
          <span className="letter-strokes letter-strokes--y">
            <span className="y-left-stroke letter-stroke">
              <svg className="letter-stroke__svg" viewBox="0 0 196 232">
                <path ref={el => this.activePaths(el)} className="letter-stroke__svg-path" d="M58,0c0,42,13.8,71.5,37,117c24,47,52,80,52,116" />
              </svg>
            </span>
            <span className="y-right-stroke letter-stroke">
              <svg className="letter-stroke__svg" viewBox="0 0 218 215">
                <path ref={el => this.activePaths(el)} className="letter-stroke__svg-path" d="M110.5,0.1c0,0,0.1,83.6-0.5,143.5c-0.5,60-0.5,90-0.5,90" />
              </svg>
            </span>
            <span className="y-bottom-stroke letter-stroke">
              <svg className="letter-stroke__svg" viewBox="0 0 106 122">
                <path ref={el => this.activePaths(el)} className="letter-stroke__svg-path" d="M59,0.1c0,0,0.1,43.5-0.5,76.8S58,125.6,58,125.6" />
              </svg>
            </span>
          </span>
        </span>
      </div>
    );
  }
};

export default withNavItem(NavItemHeyo);

这codepen是某人采用不同路线按顺序为某些路径设置动画的示例，但我不确定是否可以复制它，因为我的路径是如此嵌套。

有没有人有什么想法？

Answer 1

错误显示是因为子组件中的 this 代表子组件而不是 HOC。为了能够使用这样的功能，它需要通过 props 传递给子组件。一些伪代码:

// HOC
...
render() {
  this.rendered = true;
  return <WrappedComponent {...this.props} activePaths={this.activePaths} />;
} 

// WRAPPED COMPONENT
...
<path ref={el => this.props.activePaths(el)} />