React：Tippy 按钮不显示 onCursorActivity

Question

我正在使用 CodeMirror 进行语法高亮显示。我想在用户单击文本时触发弹出窗口。我正在使用 React Tippy - 一个基于 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" (instance: CodeMirror) Will be fired when the cursor or selection moves, or any change is made to the editor content.

当你 return 一个 jsx 元素时它什么都不做。

React Tooltip 可以正常工作，因为它会弹出并锚定到它的子组件。因此，您需要将其扭曲到代码镜像之上才能显示出来。

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

React：Tippy 按钮不显示 onCursorActivity

React: Tippy button not displaying onCursorActivity

javascript

codemirror

reactjs

react-codemirror

tippyjs