How to render a node mixing functional component and html string?

Question

I've got a functional component which need to render a child component (functional too) and an html string sibling to him in the same node.

Following this piece of code:

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

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

It should render this html code:

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

In this case, My<br>Value will just be interpreted as text, <br> will be visible.

My goal is to render the ResponsiveLabel and const html as html.

To do it with CreateElement function, we have to use the prop. domProps like this:

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

Which will result as a well interpreted html string, and <br> will make a carriage return.

But i don't know how to render this html with ResponsiveLabel before...

I can't do that

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 ]);

Or even:

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

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

How can i reach my goal ?

EDIT: it seems not possible. If we use render function, we have to use a tag. So I need to use one for my html string.

Steven B. · Accepted Answer · 2019-09-03 17:28:24Z

1

You're going to have to wrap your html in an element. There's no way around it as far as I know. The tag is a required parameter. Then as you mentioned, feed the actual html string to domProps. After that, it's just a matter of calling your render function (h in this case) on each of your children in the order you want (see the uicell component below.

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>

answered Sep 3, 2019 at 17:28

Steven B.

9,4323 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David Over a year ago

Yes i could use a tag, but i wanted to not use one :/ If i write the html by myself, it's acceptable in a SFC or within template prop, it's ok. It's unfortunate to not be able to do it with render function. Do you know if and how i could render ResponsiveLabel first ? Because i could concat it with html string.

Steven B. Over a year ago

@David the components are rendered in the order that they are given to the children array. The example I have provided renders ResponsiveLabel first.

David Over a year ago

Yes i understand. But i wished to not use a tag for the html string, that's why i wondering if i can render the ResponsiveLabel as html then concat it to my html string so i will be able to just set innerHTML. But anyway it is working like that but i've got a tag in too much :)

Collectives™ on Stack Overflow

How to render a node mixing functional component and html string?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related