NippleJS＆amp; React：无法读取属性＆＃39; getBoundingClientRect＆＃39;未定义的

Question

在React中尝试使用NippleJS时，我看到Cannot read property 'getBoundingClientRect' of undefined。

操纵杆处于模态中，因此初始化NippleJS时UI元素不存在。

这是我的配置：

componentDidMount = () => {

    const joystickParams = {
      zone: this.joystick,
      mode: 'static',
      position: {top: '49.995%', left: '20.625%'}
    };

    const manager = require('nipplejs').create(joystickParams);
  };

Answer 1

问题是我的操纵杆是以一个模态渲染的，只在click事件中打开，因此当componentDidMount被触发时，操纵杆元素在虚拟DOM中不存在。

解决方案是将操纵杆移动到其自己的组件文件中，并将componentDidMount代码放在那里，并使用父HTML中的<Joystick />实例化组件。

Answer 2

在我的情况下，我使用了ngAfterViewInit（）钩子。 问题解决了。 ：）