从 ketcher React 中的编辑器 React 组件访问结构属性

Question

我正在构建一个与分子结构编辑器反应的网络应用程序。

使用 ketcher-standalone 中的示例，我让这个编辑器正常工作：

import {useState} from "react"
import {StandaloneStructServiceProvider} from "ketcher-standalone"
import {Editor} from "ketcher-react"
import "ketcher-react/dist/index.css"

const structServiceProvider = new StandaloneStructServiceProvider()

const KetcherEditor = () => {

    // this is what i would like to use
    const [structure, setStructure] = useState('')
    
    return(
        <Editor
            staticResourcesUrl=""
            structServiceProvider={structServiceProvider}
            errorHandler={message => console.error(message)}
        />
    )
}

export default KetcherEditor

但是，我想访问编辑器中绘制的结构来处理和存储它。为此，我想使用

useState

钩子。我还没有找到任何有关如何将状态设置器传递给编辑器组件的文档。

如何访问结构属性？

Answer 1

您可能会在这里找到一些用法https://github.com/epam/ketcher/tree/master/example。 ketcher 有一个 init 方法https://github.com/epam/ketcher/blob/7343fddd2c979c31fefdcba21e5df0687167a842/example/src/App.tsx#L99。您可以在

setStructure(ketcher)

之后致电

window.ketcher = ketcher

。

附注window.ketcher 是必需的，否则粘贴(ctrl + v) 会引发错误。