将React与不受控制的第三方组件一起使用

Question

I'd like to create a UI similar to JSFiddle using React:

• A panel for HTML, CSS and JS
• A preview panel
• A single "Run" button that updates the preview

I'd like to use Microsoft's Monaco editor for the HTML, CSS and JS panels to get syntax highlight and autocomplete.

I've abstracted out a generic MonacoEditor component. My component hierarchy looks something like this:

<Root>
  <div>HTML <MonacoEditor /></div>
  <div>CSS <MonacoEditor /></div>
  <div>JS <MonacoEditor /></div>
  <button onClick={this.run}>Run</button>
  <PreviewPanel />
</Root>

If I were implementing this UI in Vanilla JS, the run() method would call getValue() on each Monaco instance to extract the full text from each panel and generate the preview.

This becomes awkward with React, however, since the run() method can't call methods on instances of child components.

One workaround would be for the MonacoEditor to have an onUpdate prop which gets fired on every keystroke. The Root component could store the provisional contents of each panel for when the "Run" button was clicked. This is what I might do if each editor were a <textarea> . But it's a non-starter with Monaco. Serializing the text of the editor on every keystroke makes it unusably slow.

The only other approach I can think of is passing in a "getter setter" to the MonacoEditor component, eg:

class Root extends React.Component {
  render() {
    return (
      <div>
        <MonacoEditor setGetter={getter => this.getHTML=getter} />
        <MonacoEditor setGetter={getter => this.getCSS=getter} />
        <MonacoEditor setGetter={getter => this.getJS=getter} />
        <button onClick={() => this.run()}>Run</button>
        <PreviewPanel />
      </div>
    );
  }

  run() {
    const html = this.getHTML();
    const css = this.getCSS();
    const js = this.getJS();
    // ...
  }
}

But this feels extremely awkward and counter to the idea of one-way databinding. Is there a better, more idiomatic approach?

Answer 1

You can checkout react-monaco-editor .

This will satisfy all your requirements! Especially getting value from the editor instance .

If not this, declare a function inside the editor component and use ref to call that function from other components.

Hope it helps!