如何在反应中显示Blockly

Question

我试图在我的React项目中使用布洛克。安装工作正常，我可以运行我的项目，没有任何错误，但区块不出现。我有一个很大的空荡荡的街区，我不知道为什么。我保留了与github项目相同的组件，我使用了在github上显示的完全相同的示例(除了我将代码放在自己的组件上)。

当我打开控制台时，我可以看到块状元素在那里，但我无法看到它们并使用它们。我需要在块中创建自定义元素，并能够使用它生成代码。

My page ( GenericPage是一个包含webiste布局的组件)

import React from 'react';
import GenericPage from '../_components/Layout/GenericPage';
import Blockly from 'node-blockly/browser';
import BlocklyDrawer,{ Block,Category } from 'react-blockly-drawer';

const BlocklyAltPage = (props) => {
    const helloWorld = {
        name: 'HelloWorld',
        category: 'Demo',
        block: {
            init: function () {
                this.jsonInit({
                    message0: 'Hello %1',
                    args0: [
                        {
                            type: 'field_input',
                            name: 'NAME',
                            check: 'String',
                        },
                    ],
                    output: 'String',
                    colour: 160,
                    tooltip: 'Says Hello',
                });
            },
        },
        generator: (block) => {
            const message = `'${block.getFieldValue('NAME')}'` || '\'\'';
            const code = `console.log('Hello ${message}')`;
            return [code,Blockly.JavaScript.ORDER_MEMBER];
        },
    };

    return (
        <GenericPage>
            <BlocklyDrawer
                tools={[helloWorld]}
                onChange={(code,workspace) => {
                    console.log(code,workspace);
                }}
                language={Blockly.JavaScript}
                appearance={
                    {
                        categories: {
                            Demo: {
                                colour: '270'
                            },
                        },
                    }
                }
            >
                <Category name="Variables" custom="VARIABLE" />
                <Category name="Values">
                    <Block type="math_number" />
                    <Block type="text" />
                </Category>
            </BlocklyDrawer>,
        </GenericPage>
    );
}

export default BlocklyAltPage;

Answer 1

确保注入Blockly的div具有指定的高度。您需要这样做，因为div本身没有。如果您说可以在控制台中看到Blockly，而不能在页面中看到，这可能是问题的原因。