Skip to content

[Bug][Carousel]组件在JSX下子节点无法渲染文本内容 #7013

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
1 task
yangtianxia opened this issue Oct 10, 2023 · 2 comments
Closed
1 task

[Bug][Carousel]组件在JSX下子节点无法渲染文本内容 #7013

yangtianxia opened this issue Oct 10, 2023 · 2 comments

Comments

@yangtianxia
Copy link

  • 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

Edit on CodeSandbox

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?

组件子节点无法渲染文本内容

Copy link

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 18, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

1 participant