Реагируйте: типичная кнопка не отображается на CursorActivity - PullRequest
Новая
       61

Реагируйте: типичная кнопка не отображается на CursorActivity

0 голосов
/ 23 сентября 2019

Я использую CodeMirror для подсветки синтаксиса.Я хотел бы запустить всплывающее окно, когда пользователь нажимает на текст.Я использую React Tippy - компонент React, основанный на Tippy.js.

По сути, я не получаю всплывающих подсказок.Я также не получаю никаких ошибок.

У меня есть пример с песочницей: 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;

1 Ответ

0 голосов
/ 23 сентября 2019

В соответствии с документом

«cursorActivity» (экземпляр: CodeMirror) Будет запускаться при перемещении курсора или выделения или при внесении любых изменений в содержимое редактора.

Он ничего не сделает, когда вы вернете элемент jsx.

Всплывающая подсказка React работает, когда она всплывает и привязывается к своему дочернему компоненту.таким образом, вам нужно будет деформировать его поверх Code Mirror, чтобы отобразиться.

Вот рабочая версия https://codesandbox.io/s/jovial-varahamihira-xg6ty?fontsize=14

...