1

use blocky in React.js ,the question about the 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

the error : Uncaught Error: container is not in current document.

enter image description here

Custer
  • 145
  • 2
  • 8
  • import Blockly from 'node-blockly' ---> import Blockly from 'node-blockly/browser' It's OK ~ – Custer Aug 12 '17 at 09:06

1 Answers1

0

The ref callback is effectively the componentDidMount for that JSX element.

Move the logic out of componentDidMount and into the ref callback instead.

Danny Delott
  • 6,756
  • 3
  • 33
  • 57
  • but other people use it's ok , about this :https://github.com/jiaowochunge/DemoBlockly/blob/master/src/blocklyDiv.js#L14 how can I fix the code? thank you for your help – Custer Jul 21 '17 at 01:09