vuejs / babel-plugin-jsx

JSX for Vue 3
https://vue-jsx-explorer.netlify.app
MIT License
1.73k stars 141 forks source link

[Question] 动态解析组件异常 #504

Open ibubbo opened 3 years ago

ibubbo commented 3 years ago

🧐 Problem Description

在使用了 unplugin-vue-components 按需加载了 antd ui 组件库,我想写一个动态表单,但是渲染之后,就是我传入的值,而不是解析了那个组件。

💻 Sample code

setup () {
    const Tag = 'AInput';
    return () => (
        <Tag placeholder='这是一个 input' />
    )
}

没有如期解析成 input。

Amour1688 commented 3 years ago

试下 resolveComponent

ibubbo commented 3 years ago

@Amour1688 试过,不行

github-actions[bot] commented 3 years ago

Hello @ibubbo. In order to facilitate location and troubleshooting, we need you to provide a realistic example. Please forking these link codesandbox or provide your GitHub repository.

zxcvc commented 3 years ago

Hello @ibubbo. In order to facilitate location and troubleshooting, we need you to provide a realistic example. Please forking these link codesandbox or provide your GitHub repository.

https://codesandbox.io/s/muddy-sea-pq5x5?file=/src/App.jsx

ct568 commented 2 years ago
import { defineComponent } from "vue";

const B = defineComponent({
  setup() {
    return () => (<div>BBBBB</div>)
  }
});

const A = defineComponent({
  setup() {
    return () => (<div>AAAAA</div>)
  }
})

export default defineComponent({
  setup() {
    const WHO = Math.random() > 0.5 ? A : B; // 是组件,不是字符串。
    return () => (
      <div>
        <B />
        <WHO />
        11111
      </div>
    );
  }
});