React动态模板渲染HTML标签自动补全关闭方法问询

没有办法禁用所谓的「React自动补全缺失HTML标签」特性，因为这个行为本质是浏览器原生HTML解析器的默认规则，不是React实现的功能。只要你将不完整的HTML片段传入解析器，浏览器为了生成合法的DOM结构，必然会自动补全缺失的闭合标签，这个是HTML标准要求的底层逻辑，没有关闭入口。

以下是两种可行的解决方法： #

方案1：调整状态结构，用插槽替代拆分HTML标签 #

不要把完整的HTML元素拆成开始标签、内容、闭合标签三部分单独渲染，改为在完整HTML模板中预留插槽位，渲染时替换插槽内容，可完整保留组件的React交互能力：

状态定义示例 #

const [oHtml, setoHtml] = React.useState([
    {
      type: "template",
      // 完整HTML模板，用占位符标记组件插入位置
      tpl: "<table><tr><td>{{CUSTOM_INPUT}}</td></tr></table>",
      // 插槽对应的组件
      slots: {
        CUSTOM_INPUT: (
          <CustomInput
            labelText="Password"
            id="password"
            formControlProps={{
              fullWidth: true,
            }}
            inputProps={{
              type: "password",
              autoComplete: "off",
            }}
          />
        )
      }
    }
]);

渲染逻辑 #

先把模板字符串按占位符拆分，交替渲染HTML片段和插槽组件即可：

return (
  <div>
    {oHtml.map(item => {
      if (item.type === "template") {
        // 拆分模板字符串
        const parts = item.tpl.split(/{{(\w+)}}/);
        return parts.map((part, idx) => {
          // 偶数索引是HTML片段，奇数索引是插槽名
          if (idx % 2 === 0) {
            return ReactHtmlParser(part);
          } else {
            return item.slots[part] || null;
          }
        })
      }
      // 其他类型的渲染逻辑保持不变
      return null;
    })}
  </div>
);

方案2：整段拼接后一次性渲染（仅适用于无交互的静态内容） #

如果你的自定义控件不需要保留React交互事件，可以先把控件渲染为静态HTML字符串，和前后的HTML片段拼接成完整的HTML字符串后，再一次性解析渲染：

import ReactDOMServer from 'react-dom/server';

// 渲染时拼接完整HTML
const fullHtml = `
  <table><tr><td>
  ${ReactDOMServer.renderToString(<CustomInput
    labelText="Password"
    id="password"
    formControlProps={{ fullWidth: true }}
    inputProps={{ type: "password", autoComplete: "off" }}
  />)}
  </td></tr></table>
`;

return <div>{ReactHtmlParser(fullHtml)}</div>

注意：该方案会丢失自定义组件的所有React事件绑定，仅适合纯静态展示场景。

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