Gutenberg 仍然很新，但我仍然希望有人遇到这个问题并找到解决方案。
我使用 create-guten-block 对项目进行样板化并创建了一个测试块。我遇到的问题是，当我尝试使用 React 组件在前端修改状态时，什么也没有发生。通过 save() 可以很好地加载组件，但是当您尝试执行简单的操作（例如切换列表）时，前端仍然对状态更改没有响应。我还要注意 create-guten-block 不加载任何前端 JS，所以我将编译后的 javascript 换成在前端加载，但仍然无法让它工作。
这是我从 Codecademy 中提取的一些代码，作为一个简单的测试示例。当您选择一个名称时，它会更改sibling.js 中的文本以显示该名称。该代码在 create-react-app 中运行良好，但在前端作为 Gutenberg 中的块什么也不做：
块.js
import { Parent } from './parent';
// More code here
save: function( props ) {
return (
<div>
<Parent />
</div>
);
},
父.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>
);
}
}
兄弟.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>
);
}
}