javascript - ReactJS：在代码镜像编辑器顶部显示另一个 UI 元素

Question

我有一个 codemirror 对象。当光标悬停在代码上时，我想在代码镜像编辑器顶部显示一个提示按钮。

到目前为止，我可以检测到鼠标何时悬停，但我无法在编辑器顶部显示任何内容。我的代码在下面，我这里也有一个沙箱

import React from "react";
import ReactDOM from "react-dom";
import { Controlled as CodeMirror } from "react-codemirror2";


var codeSample = `
openssl rand -base64 756 > <path-to-keyfile>
chmod 400 ~/KeyFilePath`

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

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

  }
  _onMouseMove(e) {
    console.log("mouse moved!!!")
      this.setState({ x: e.screenX, y: e.screenY });
      var node = event.srcElement;
      console.log(node.innerText);
      return(<Tooltip id="sib" interactive='true' title="hi"></Tooltip>)
    }
  render() {
    const { valueTit } = this.state;
    return (

      <Tooltip id="sib" interactive='true' title={valueTit}>
      <div onMouseMove={this._onMouseMove.bind(this)}>
        <CodeMirror
          value= {codeSample}
          options={{
            mode: "clike",
            theme: "material",
            lineNumbers: true
          }}
          editorDidMount={editor => { this.instance = editor }}
        />
        </div>
      </Tooltip>
    );
  }
}

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

export default App;

我的另一个想法是尝试将令牌包装在一个小费按钮中？但我不确定如何做出反应。我查看了这个使用 codemirror 解析器的反应语法荧光笔，我相信我找到了对代码块进行样式化的代码：

    const pushElement = (token, style) => {
      elements.push(_react["default"].createElement("span", {
        className: style ? prefix + style : '',
        key: ++index
      }, token));
    };

    const mode = codeMirror.findModeByName(language);
    codeMirror.runMode(value, mode ? mode.mime : language, (token, style) => {
      if (lastStyle === style) {
        tokenBuf += token;
        lastStyle = style;
      } else {
        if (tokenBuf) {
          pushElement(tokenBuf, lastStyle);
        }

        tokenBuf = token;
        lastStyle = style;
      }
    });
    pushElement(tokenBuf, lastStyle);

    const code = _react["default"].createElement("code", {
      className: inline ? `inline ${prefix}s-${theme}` : ''
    }, elements);

    return inline ? code : _react["default"].createElement("pre", {
      className: `${className} ${prefix}s-${theme}`
    }, code);
  }

我会做一些事情createElement来创建小费按钮吗？

标签： javascriptreactjscodemirrortippyjsreact-codemirror