VueJS函数式组件：如何渲染任意HTML内容？

Got it, let's work through this issue. You're spot-on—when you pass a string directly as the third argument to createElement, Vue treats it as plain text, which is why your HTML markup is getting escaped instead of rendered as actual elements.

To fix this, you need to use the domProps option in the second parameter of createElement to set the element's innerHTML property directly. Here's how to adjust your component:

export const TableCell = Vue.component('TableCell', {
  functional: true,
  render(createElement, context) {
    const item = context.props.item;
    const column = context.props.column as TableColumn;
    // 省略：渲染模板；value中可能包含基础HTML内容
    const value = ...; // 你的HTML字符串
    
    // 配置domProps来渲染HTML内容
    return createElement('span', {
      domProps: {
        innerHTML: value
      }
    });
  },
  props: {
    item: Object,
    column: {}
  }
});

Critical Security Reminder #

Just like Vue's v-html directive, using innerHTML carries XSS vulnerability risks if the HTML content comes from untrusted sources (like user-generated input). Make sure you:

• Sanitize the HTML string before passing it to the component (using a tool like DOMPurify, for example)
• Only use this approach with content you fully control and trust

This fix mirrors the behavior of v-html but is adapted for the render function syntax of functional components—perfect for your use case.

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