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

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

  

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

enter image description here

Answer 1

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

将逻辑移出componentDidMount并改为ref回调。