反应:Tippy 按钮未在光标活动上显示

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"(实例：CodeMirror(将在光标 或选择移动，或对编辑器内容进行任何更改。

当您返回 jsx 元素时，它将不执行任何操作。

React 工具提示的工作原理是它会弹出并锚定到它的子组件。 因此，您需要将其扭曲在代码镜像之上才能显示。

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