在 Wordpress 块开发的上下文中从道具理解常量赋值的问题

Question

我不确定这是我对JavaScript，还是React，或者Wordpress对React的修改不够了解，但这是在做什么？

export default function MyFunction( props ) {
        const {
                attributes: {
                    foo1,
                    foo2
                },
                setAttributes,
        } = props;

我认为它采用了 React 道具并创建了两个范围为 MyFunction 的 const：“attributes”和“setAttributes”。但是，稍后，如果我做类似

   return (
      <>
        <Fragment>
            <div>{ foo1 }</div> // this works fine
            <div>{ attributes }</div> // this says "ReferenceError: Can't find variable: attributes"
        </Fragment>
      </>
    );

我不明白为什么我可以引用 foo1 而不去 attributes.foo1；而且我不明白为什么我不能引用属性。所以，我显然不理解什么看起来像“简单”的任务。帮忙？

Answer 1

您在进行对象传播时已经钻过 attributes，所以您只分配了内部值。有几种方法可以解决这个问题

export default function MyFunction( props ) {
        const {
                attributes: {
                    foo1,
                    foo2
                },
                attributes, // grab attributes too
                setAttributes,
        } = props;

export default function MyFunction( props ) {
        const {
                attributes,
                setAttributes,
        } = props;
        const { foo1, foo2 } = attributes; // grab the values after

或者您可以像上面那样获取属性并使用点符号 attributes.foo1

在 Wordpress 块开发的上下文中从道具理解常量赋值的问题

Problem understanding const assignment from props in context of Wordpress block development

javascript

reactjs

wordpress-gutenberg