Question

我有一个功能组件，该组件需要呈现一个子组件（也具有功能），并且需要在同一个节点上为其呈现同级的html字符串。

以下这段代码：

const html = 'My<br>Value';
const ResponsiveLabel = render('span', { class: 'responsive-label' }, 'MyLabel:');

return render('div', { class: 'ui-cell' }, [ ResponsiveLabel, html ]);

它应呈现以下html代码：

<div class="ui-cell">
  <span class="responsive-label">MyLabel:</span>
  My<br>Value
</div>

在这种情况下，My<br>Value将仅被解释为文本，<br>将可见。

我的目标是将ResponsiveLabel和const html呈现为html。

要使用CreateElement函数，必须使用道具。 domProps像这样：

render('any', { domProps: { innerHTML: html } });

这将产生解释正确的html字符串，而<br>将返回回车符。

但是我不知道如何在...之前使用ResponsiveLabel呈现此html。

我不能这样做

const html = render(undefined, { domProps: { innerHTML: 'My<br>Value' } });
const ResponsiveLabel = render('span', { class: 'responsive-label' }, 'MyLabel:');

return render('div', { class: 'ui-cell' }, [ ResponsiveLabel, html ]);

甚至：

const ResponsiveLabel = render('span', { class: 'responsive-label' }, 'MyLabel:');

return render('div', {
    class: 'ui-cell',
    domProps: { innerHTML: 'My<br>Value' }
  }, [ ResponsiveLabel ]);

我如何实现我的目标？

编辑：似乎不可能。如果使用渲染功能，则必须使用标签。因此，我需要在html字符串中使用一个。

Answer 1

您将不得不将html包装在一个元素中。据我所知，这是不可能的。 tag是必需参数。然后，正如您提到的，将实际的html字符串提供给domProps。之后，只需按所需顺序在每个子对象上调用渲染函数（在这种情况下为h（请参见下面的uicell组件）。

const html = 'My<br>Value';

Vue.component('yourhtml', {
  functional: true,
  render(h, context) {
    return h(
      'span',
       { domProps: { innerHTML: html } },
    )
  },
})

Vue.component('reslabel', {
  functional: true,
  render(h, context) {
    return h(
      'span',
      {
      	class: 'responsive-label' 
      },
      'MyLabel',
    )
  },
})

Vue.component('uicell', {
  functional: true,
  render(h, context) {
    return h(
    	'div',
      {
      	class: 'ui-cell' 
      },
      [h('reslabel'), h('yourhtml')]
    );
  }
}),

new Vue({
  el: "#app",
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <uicell></uicell>
</div>

如何呈现混合功能组件和html字符串的节点？

1 个答案: