[Bug][Carousel]组件在JSX下子节点无法渲染文本内容 #7013
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
3.2.20
Environment
chrome浏览器、Vue3-v3.3.4
Reproduction link
Steps to reproduce
目前出现问题的情况，使用vue3 jsx开发就会出现无法渲染子节点的情况
import { Carousel } from "ant-design-vue";
import { defineComponent } from "vue";
export default defineComponent({
setup() {
const list = [{ title: "1-1" }, { title: "1-2" }];
return () => (
<Carousel>
{list.map((item) => (
<div key={item.title}>{item.title}</div>
))}
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
</Carousel>
);
}
});目前当前解决办法是，使用vue的h方法创建一个虚拟 DOM 节点
import { Carousel } from "ant-design-vue";
import { defineComponent, h } from "vue";
export default defineComponent({
setup() {
const list = [{ title: "1-1" }, { title: "1-2" }];
return () => (
<Carousel>
{list.map((item) => (
<div key={item.title}>{h("h3", item.title)}</div>
))}
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
</Carousel>
);
}
});正常使用vue模板开发模式不会出现问题
<template>
<a-carousel :after-change="onChange">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
</a-carousel>
</template>
<script>
const onChange = current => {
console.log(current);
};
</script>
<style scoped>
/* For demo */
:deep(.slick-slide) {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
:deep(.slick-slide h3) {
color: #fff;
}
</style>What is expected?
修复Carousel组件slide节点无法渲染文本内容bug
What is actually happening?
组件子节点无法渲染文本内容