タグ: JSX

JSXでGutenbergブロック開発

hysryt コメントをする

Gutenbergブロックの editedit 関数や savesave 関数は返り値として React要素を返すため、その部分をJSXで記述することが可能です。JSXを導入することにより記述が容易になり、可読性の向上も見込めます。

// JSXなし
return wp.element.createElement(
  "h1",
  { className: "heading" },
  "Hello, World"
);
  • // JSXなし
  • return wp.element.createElement(
  • "h1",
  • { className: "heading" },
  • "Hello, World"
  • );
// JSXなし
return wp.element.createElement(
  "h1",
  { className: "heading" },
  "Hello, World"
);
// JSXあり
return (
  <h1 className="heading">
    Hello, World
  </h1>
);
  • // JSXあり
  • return (
  • <h1 className="heading">
  • Hello, World
  • </h1>
  • );
// JSXあり
return (
  <h1 className="heading">
    Hello, World
  </h1>
);

続きを読む