ReactJS: установка верхнего положения кнопки Tippy приводит к ошибке - PullRequest
Новая
       50

ReactJS: установка верхнего положения кнопки Tippy приводит к ошибке

0 голосов
/ 26 сентября 2019

Я пытаюсь, чтобы подсказка появилась над курсором.Прямо сейчас, когда появляется подсказка (при наведении курсора), я получаю эту ошибку: 

TypeError: placement.indexOf is not a function in node_modules/popper.js/dist/esm/popper.js:683

Прямо перед ошибкой, я вижу обрезанный, огромный подсказку под редактором кода ошибки (хотя он у меня деформирован)top).

Однако в моей песочнице она не выдает ошибку.Тем не менее, он дает вам кусок tippy (опять же, вы можете сказать, что это действительно большой кусок tippy), который разделяет слова в строке кода.Вот изображение: enter image description here

Код: 

import React from "react";
import ReactDOM from "react-dom";
import Tippy from '@tippy.js/react';
/* eslint no-restricted-globals: "off"*/

var codeSample = `
openssl rand -base64 756 > keyfile.txt
chmod 400 keyfile.txt`


class App extends React.Component {
  state = {
    valueTitle: "Hello"
  };

  constructor() {
    super();
    this.instance = null;
    this.tippyInstance = null;
  }

  storeTippyInstance = instance => {
    this.tippyInstance = instance
  }
  _onMouseMove(e) {

    var node = event.srcElement;
    //const tippyInstance = useRef()

    console.log(event.target)
    if ( ['cm-variable', 'cm-number', 'cm-operator', 'cm-builtin', 'cm-attribute'].includes(event.target.className)) {
      this.tippyInstance.setContent(node.innerText);
      this.tippyInstance.set({appendTo: event.target, placement:top})
    }
    else{

    }
  }

  render() {
    const { valueTitle, tippyInstance, instance } = this.state;
    const props = {}
    //const tippyInstance = useRef()


    return (
     <div key="migraine">
      <Tippy
        key="pop"
        content=""
        onCreate={this.storeTippyInstance}
        placement="top"
        followCursor="true">
      <div key= "hitomato" onMouseMove={this._onMouseMove.bind(this)}>
        <CodeMirror
        key="shit"
          value= {codeSample}
          options={{
            mode: "shell",
            theme: "material",
            lineNumbers: true
          }}
          editorDidMount={editor => {
             this.instance = editor

          }}
        />
        </div>
      </Tippy>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

export default App;
...