React代码中能否直接编写HTML标签？WordPress自定义块开发报错

原生JS环境下编写React代码时，不能直接插入裸写的HTML标签，你遇到报错的核心原因有两点：

• 你拿到的示例是基于React.createElement/wp.element.createElement的纯JS React实现，没有配置JSX编译链路
  我们平时在React代码里直接写<div>、<p>这类和HTML写法一致的内容叫做JSX，它不属于浏览器可识别的原生JavaScript语法，必须经过Babel等编译工具转译为标准的React.createElement函数调用才能正常运行。你直接在现有纯JS代码里插入裸HTML标签，浏览器会判定为非法JS语法直接抛出错误。
• 你贴的示例代码中edit函数的返回值本身存在写法错误
  原代码return后的括号内直接并列写了"div", null, 多个createElement，实际是利用了JS的逗号运算符，最终只会返回最后一个ColorPicker元素，外层的div根本没有被正确创建，自然也无法正常承接你新增的标签。

适配当前代码场景的正确写法 #

如果你暂时不想配置JSX编译环境，只想在现有代码基础上新增div、p这类标签，直接调用WordPress封装好的wp.element.createElement方法创建元素即可，修正后的edit函数返回值示例如下：

return wp.element.createElement(
  "div", // 要创建的根标签名
  { className: "coin-info-border-box" }, // 标签属性，比如class、行内样式、事件绑定都写在这里
  // 从第三个参数开始，所有传入的内容都是当前根标签的子元素
  wp.element.createElement("h3", null, "Simple Box"),
  wp.element.createElement("p", null, "这里就是你要新增的p标签内容"),
  wp.element.createElement("input", { type: "text", value: props.attributes.content, onChange: updateContent }),
  wp.element.createElement(wp.components.ColorPicker, { color: props.attributes.color, onChangeComplete: updateColor })
);

如果后续你想像写普通HTML一样直接写标签，需要给WordPress自定义区块配置标准构建流程（官方推荐用@wordpress/scripts工具包），配置完成后就可以直接写JSX语法，示例如下：

return (
  <div className="coin-info-border-box">
    <h3>Simple Box</h3>
    <p>这里就是你要新增的p标签内容</p>
    <input type="text" value={props.attributes.content} onChange={updateContent} />
    <wp.components.ColorPicker color={props.attributes.color} onChangeComplete={updateColor} />
  </div>
)

这种写法视觉上和普通HTML几乎一致，但本质还是会被构建工具转译为前面提到的createElement调用，无法直接在浏览器环境中运行。

注意：WordPress古腾堡区块的save函数（负责输出前端静态内容的方法）遵循完全相同的规则，没有JSX编译环境时一律通过wp.element.createElement创建标签，不要直接裸写HTML字符串。

内容的提问来源于stack exchange，提问作者Morty_Smith