如何在 React 中显示 Blockly

问题描述

我尝试在我的 React 项目中使用 blockly。安装工作正常，我可以毫无错误地运行我的项目，但没有出现块状。我有一个很大的空块，我不知道为什么。我保留了与 github project 相同的组件，我使用了 github 上显示的完全相同的示例（除了我将代码放在我自己的组件上）。

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

我的页面（GenericPage 是一个包含我网站布局的组件）

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;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）