Gutenberg将块属性传递给ES6/ESNext中的组件

时间：2019-01-04 作者：at least three characters

我看到了许多关于如何将道具从一个块组件传递到另一个组件的示例，但它们都使用ES5语法。

在ES6中，注册块时的编辑功能如下所示：

edit( { attributes, className, setAttributes } ) {
   const { title, url, image, content } = attributes;

   ...etc
我想传递属性和setAttributes 到组件。这个语法正确吗？

<MyComponent { ...{setAttributes, ...attributes } } />
那么在我的组件中，我是否可以这样访问它们：？

class MyComponent extends Component {
    constructor( props ) {
        super( ...arguments )
    }
    render() {
       const { title, url, image, content } = this.props.attributes;
       const { setAttributes } = this.props;

       ...etc
有很多方法可以做到这一点，但不确定推荐哪种方法。

1 个回复
最合适的回答,由SO网友:Alvaro 整理而成

这是一个与react相关的问题，所以我建议您看看Components and Props.

在这种情况下，edit函数传递一个参数，该参数是一个对象，我们可以调用props：

registerBlockType("my-plugin/my-block", {
    //...
    edit: props => {
        return <MyComponent {...props} />;
    }
});
这种传播方式与：

<MyComponent attributes={props.attributes} setAttributes={props.setAttributes} />
具有道具对象的所有属性。

然后，在组件内部，您可以像在问题中所做的那样访问属性：

class MyComponent extends Component {
    render() {
        const { attributes, setAttributes } = this.props;
        const { title, url, image, content } = attributes;


    //...etc
注：

在使用了块和过滤器之后，我得出了一个结论，即最好将编辑和保存函数的根元素保留为html元素，而不是组件（然后在其中添加组件）。这是因为Gutenberg通过过滤器更改了这个根元素（例如，它添加了必要的类作为块名，并允许过滤器向其传递属性），如果您使用自己的组件，则必须自己完成这项操作。您可以检查columns block 查看编辑和保存功能中的差异。

registerBlockType("my-plugin/my-block", {
    //...
    edit: props => {
        return (
            <div className={props.className}>
                <MyComponent {...props} />
            </div>
        );
    },
    save: props => {
        return (
            <div>
                <MyComponent {...props} />
            </div>
        );
    },
});

标签： javascript   block-editor   小码农  

相关推荐

将JavaScript添加到WordPress网站

我有一个JavaScript代码片段，我想添加到我的WordPress+WooCommerce网站：$(document).ready(function() { $(\'.input-text\').on(\'input\', function() { var valueLength = $(this).val().length; if (valueLength > 0) { $(this).closest