Question

我如何将grapejs与ReactJs集成在一起，react dom不会在其中渲染葡萄内容。

import React, { Component } from 'react'
import grapesjs from 'grapesjs';

class TemplateEditor extends Component {
  constructor(props) {
    super(props)
    this.state = {
      template: null,
      editor: null,
    }
  }
  componentDidMount() {
    if(this.state.editor == null) {
      let editor = grapesjs.init({
        container: '#gjs',
        fromElement: true,
      });
      this.setState({editor})
      console.log(editor);
    }
  }
  render() {
    return(
      <main>
        <div id="gjs" ref={el => this.el = el}></div>
      </main>
    )
  }
}

export default TemplateEditor;

我正在将样式表直接添加到html文件中

Answer 1

创建编辑器后，您调用了setState。 ReactDOM将重新渲染该组件，并将ID为#gjs的div容器替换为一个新容器，以使您看不到呈现的编辑器。

要在React中使用GrapesJS。您必须调用editor.render()来获取编辑器的dom内容，并使用危险地设置InnerHtml进行渲染。

但是，您可以使用此软件包https://www.npmjs.com/package/grapesjs-react轻松将Grapes JS编辑器嵌入到React组件中

将葡萄与React集成

1 个答案: