反应: Tippy按钮不显示onCursorActivity

Question

我使用CodeMirror进行语法高亮显示。当用户单击文本时，我希望触发一个弹出窗口。我正在使用ReactiveTipp-一个基于Tippy.js的React组件。

基本上，我没有收到任何提示弹出。我也不会犯任何错误。

这里有一个沙箱示例：https://codesandbox.io/s/focused-currying-uo469

import React from "react";
import ReactDOM from "react-dom";
import 'react-tippy/dist/tippy.css'
import {
  Tooltip,
} from 'react-tippy';
//import "codemirror-extension"
/* eslint no-restricted-globals: "off"*/



function App() {
  return (
    <div className="App">
      <CodeMirror
        value="<h1>I ♥ react-codemirror2</h1>"
        options={{
          mode: "xml",
          theme: "material",
          lineNumbers: true
        }}
        onCursorActivity={(editor) => {
          console.log("tuppppy");
          return (
          <div id="parent">
            <Tooltip id="sib"
            trigger="click"
            html={(
              <div id="poop">
                <strong>
                  Hello
                </strong>
              </div>)}
            >
            </Tooltip>
            </div>
          );
        }}
        />
    </div>
  );
}

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

 export default App;

Answer 1

根据它的文件

"cursorActivity“(例如: CodeMirror)将在光标或选择移动或对编辑器内容进行任何更改时触发。

当您返回一个jsx元素时，它将什么也不做。

React工具提示工作，因为它将弹出并锚定到它的子组件。因此，你需要在代码镜面上扭曲它才能出现。

这是一个工作版本https://codesandbox.io/s/jovial-varahamihira-xg6ty?fontsize=14