如何使用 Gutenberg withSelect 重新渲染 .map() 列表内部

发布于 2025-01-19 12:34:02 字数 1049 浏览 0 评论 0原文

我正在创建古腾堡自定义块内容表，该块反应性地反映 h2 文本。在map()之外，它可以工作。但里面不工作。

请让我知道如何修改此代码。

谢谢。

import { registerBlockType } from "@wordpress/blocks";
import { withSelect, select } from "@wordpress/data";

registerBlockType("theme/toc", {
  title: "TOC",
  icon: "list-view",
  category: "layout",
  edit: withSelect((select) => {
    return {
      blocks: select("core/block-editor").getBlocks(),
    };
  })(Edit),
  save: () => {
    return null;
  },
});

export function Edit(props) {
  const { blocks = [] } = props;
  const headings = [];
  blocks.forEach((el) => {
    if (!(el.name === "core/heading" && el.attributes.level === 2)) {
      return;
    }
    headings.push(el.attributes.content);
  });

  return (
    <div>
      <p>{headings[0]}</p> // this line works
      <ol>
        {headings.map((h2, i) => { // not working
          <li key={i}>
            <a>{h2}</a>
          </li>;
        })}
      </ol>
    </div>
  );
}

原文

I'm creating table of content Gutenberg custom block which reactive reflect h2 text.
Outside of map(), it works. but inside not working.

Please let me know how to modify this code.

thanks.

import { registerBlockType } from "@wordpress/blocks";
import { withSelect, select } from "@wordpress/data";

registerBlockType("theme/toc", {
  title: "TOC",
  icon: "list-view",
  category: "layout",
  edit: withSelect((select) => {
    return {
      blocks: select("core/block-editor").getBlocks(),
    };
  })(Edit),
  save: () => {
    return null;
  },
});

export function Edit(props) {
  const { blocks = [] } = props;
  const headings = [];
  blocks.forEach((el) => {
    if (!(el.name === "core/heading" && el.attributes.level === 2)) {
      return;
    }
    headings.push(el.attributes.content);
  });

  return (
    <div>
      <p>{headings[0]}</p> // this line works
      <ol>
        {headings.map((h2, i) => { // not working
          <li key={i}>
            <a>{h2}</a>
          </li>;
        })}
      </ol>
    </div>
  );
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

多情癖 2025-01-26 12:34:02

只需卸下卷曲括号，以便可以从地图功能返回JSXELEMNT。

 <ol>
    {headings.map((h2, i) =>
      <li key={i}>
        <a>{h2}</a>
      </li>;
    )}
  </ol>

要注意的其他事情是，不建议将元素索引i用作键值。您可能需要使用您要通过的元素中的ID等更独特的值。

Simply remove the curly braces so the JSXElemnt can be returned from the map function.

 <ol>
    {headings.map((h2, i) =>
      <li key={i}>
        <a>{h2}</a>
      </li>;
    )}
  </ol>

something else to note is it's not advised to use the element index i as the key value. you may want to use a more unique value like id from the element you're looping through.

回复收藏 0 原文

~没有更多了~