Wordpress Gutenberg:在前端反应组件

Question

古腾堡仍然很新，但我仍然希望有人遇到这个问题，并找到了解决办法。

我使用创建-guten-块来完成一个项目，并创建了一个测试块。我遇到的问题是，当我试图使用React组件修改前端的状态时，什么都不会发生。组件通过save()很好地加载，但是当您尝试执行一些简单的操作(比如切换列表)时，前端仍然对状态更改没有响应。我还将注意创建-guten-块不会加载任何前端JS，因此我将编译好的javascript交换到前端加载，但仍然无法使其工作。

下面是一些代码，作为一个简单的测试示例，我从Codecademy中提取了一些代码。当您选择一个名称时，它会更改sibling.js中的文本以显示名称。该代码在创建-反应-应用程序中运行良好，但在Gutenberg中作为块在前端不做任何操作：

block.js

import { Parent } from './parent';

// More code here 

save: function( props ) {
    return (
          <div>
              <Parent />
          </div>
     );
 },

parent.js

import React from 'react';
import { Child } from './child';
import { Sibling } from './sibling';

export class Parent extends React.Component {
    constructor(props) {
        super(props);

        this.state = { name: 'Frarthur' };

        this.changeName = this.changeName.bind(this);
    }

    changeName(newName) {
        this.setState({
        name: newName
        });
    }

    render() {
        return (
        <div>
            <Child onChange={this.changeName} />
            <Sibling name={this.state.name} />
        </div>
        );
    }
};

child.js

import React from 'react';

export class Child extends React.Component {
    constructor(props) {
        super(props);

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e) {
        const name = e.target.value;
        this.props.onChange(name);
    }

    render() {
        return (
        <div>
            <select
            id="great-names"
            onChange={this.handleChange}>

                <option value="Frarthur">Frarthur</option>
                <option value="Gromulus">Gromulus</option>
                <option value="Thinkpiece">Thinkpiece</option>
            </select>
        </div>
        );
    }
}

sibling.js

import React from 'react';

export class Sibling extends React.Component {
    render() {
        const name = this.props.name;
        return (
        <div>
            <h1>Hey, my name is {name}!</h1>
            <h2>Don't you think {name} is the prettiest name ever?</h2>
            <h2>Sure am glad that my parents picked {name}!</h2>
        </div>
        );
    }
}

Answer 1

我的理解是，古登堡只支持方程编辑器方面的互动性。是的，您在React中定义了视图端，但是在保存post时，这个视图被呈现为静态标记，然后只将这个静态标记传递给客户机(读取器)。

好处是您可以免费获得“服务器端呈现”，并且您的客户端不需要响应查看帖子。缺点是，如果您想要进行客户端交互，这超出了Gutenburg的范围，您将不得不找到自己的方式。