Version

3.0.7

Reproduction link

https://codesandbox.io/s/upbeat-fog-9v6io?file=/src/components/HelloWorld.jsx

Steps to reproduce

open console

What is expected?

Should work correctly

What is actually happening?

Appear error when children includes null during patch

Do we need to handle null/undefined when unmountChildren?

ref: https://github.com/vuejs/vue-next/blob/aea88c32804e95e99aa8c50f4e916713d49fd686/packages/runtime-core/src/renderer.ts#L2248

This is not a problem with vue, as shown in the figure below:

The jsx snippet you gave:

<span innerHTML={msg.value}>{1 + 2}</span>

The equivalent template code is:

<span v-html="msg.value">{{null}}</span>

where is the problem:

1. As you can see from the above figure, using v-html and children at the same time will get a warning message, so jsx plugin should do the same
2. I know that {null} means no children, so it should generate usable code like:

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("span", {
    innerHTML: _ctx.msg.value
  }, null, 8 /* PROPS */, ["innerHTML"]))
}

But when using it in jsx，it appears error instead of warning msg:

I think we should allow to use children and innerHTML at the same time.

In this case:

<span innerHTML={ typeof msg === 'string' ? msg : undefined }>{ typeof msg === 'object' ? msg : null }</span>

when msg is string (or html string) ，innerHTML should work.

when msg is object of vnode，children should work（maybe placeholder of vnode ）.

I mean you should submit this issue in jsx-next, not here

It isn't problem of jsx-next.

As you said，when using children and innerHTML at the same time in SFC，it will appear error:

My problem is vue should allow to use children and innerHTML at the same time(even override) instead of catching error.

One thing you did not realize is that even if you specify null or undefined for v-html, it will also overwrite the children:

<div v-html="null">text</div>

The text node of this div tag will be overwritten, which is by design. If you want to do different processing according to the type of value, you can, as a demonstration:

<div v-if="isString" v-html="val"></div>
<div v-else>{{val}}</div>

Yes，you are right.

Although override is a very dangerous behavior, it should be allowed. We can display a warning message (eslint error) instead of a compilation error and cause the page to crash.