Javascript 使用React与不受控制的第三方组件进行反应

我想使用React创建一个类似于JSFIDLE的UI：

• 用于HTML、CSS和JS的面板
• 预览面板
• 更新预览的单个“运行”按钮

我想使用微软的HTML、CSS和JS面板来突出显示语法和自动完成

我已经抽象出一个通用的MonacoEditor组件。我的组件层次结构如下所示：

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

但这感觉非常尴尬，与单向数据绑定的想法背道而驰。有更好、更惯用的方法吗？

您可以结帐

这将满足您的所有要求！尤其是

如果不是这样，请在编辑器组件内声明一个函数，并使用

ref

从其他组件调用该函数

希望有帮助

您可以结帐

这将满足您的所有要求！尤其是

如果不是这样，请在编辑器组件内声明一个函数，并使用

ref

从其他组件调用该函数

---

希望有帮助

这里的一般原则是，可以使用

ref

获取对组件实例的引用。这可能会公开特定于实例的方法，例如

getValue（）

。这有点违背React数据流模型的精神，但它确实很方便！这里的一般原则是，可以使用

ref

获取对组件实例的引用。这可能会公开特定于实例的方法，例如

getValue（）

。这有点违背React数据流模型的精神，但它确实很方便！

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();
    // ...
  }
}