reactjs - 未捕获的错误：容器不在当前文档中

Question

在 React.js 中使用 blocky，关于 Blockly.inject 的问题

import React from 'react'
import Blockly from 'node-blockly'
const toolbox = `
     <xml>
       <block type="controls_if"></block>
       <block type="controls_whileUntil"></block>
     </xml>` 
class BlocklyDiv extends React.Component {
    componentDidMount() {
        var workspace = Blockly.inject(this.blocklyDiv,{toolbox: toolbox});
    }
render() {
    return (
        <div>
            <h2>BlocklyDiv</h2>
            <div id="blocklyContainer">
                <div id="blocklyDiv" ref={ref => this.blocklyDiv = ref} ></div>
            </div>
        </div>
        )
    }
}
export default BlocklyDiv

错误：未捕获错误：容器不在当前文档中。

在此处输入图像描述

Answer 1

ref回调实际上是componentDidMount该 JSX 元素的回调。

而是将逻辑移出componentDidMount和移入ref回调。