小编isk*_*taa的帖子

WordPress的Gutenberg:前端的React组件

古腾堡仍然很新,但我仍然希望有人遇到此问题并找到解决方案。

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

这是我从Codecademy提取的一些代码,作为一个简单的示例进行测试。选择名称时,它将更改sibling.js中的文本以显示名称。该代码在create-react-app中可以正常工作,但作为Gutenberg中的块,在前端没有任何作用:

block.js

import { Parent } from './parent';

// More code here 

save: function( props ) {
    return (
          <div>
              <Parent />
          </div>
     );
 },
Run Code Online (Sandbox Code Playgroud)

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} …
Run Code Online (Sandbox Code Playgroud)

wordpress reactjs wordpress-gutenberg gutenberg-blocks

1
推荐指数
2
解决办法
1179
查看次数