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 Tooltip可以正常工作，因为它将弹出并固定到其子组件。因此您需要将其扭曲在“代码镜像”上才能显示。

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

反应：尖尖的按钮不显示onCursorActivity

1 个答案: