Skip to content
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

fix(carousel): can not use jsx list map render children #7077

Conversation

huiliangShen
Copy link
Contributor

fix bug #7013 4.x版本同样有此问题,4.x与3.x版本源码一致,优先处理4.x,不知3.x是否也需要提pr?

3.x 版本代码如下:https://github.com/vueComponent/ant-design-vue/blob/3.x/components/_util/vnode.ts

出现此bug的原因

// 复现例子
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>
    );
  }
});
// jsx渲染后的vnode结果如下
const vnode = {
  type: "div", 
  children: ["1-1"],//...
}
// deepCloneElement函数执行过程会把上述children同样当做vnode处理,被clone后返回一个空的vnode导致只有jsx出现渲染问题
export function deepCloneElement<T, U>(
  vnode: VNode<T, U> | VNode<T, U>[],
  nodeProps: NodeProps = {},
  override = true,
  mergeRef = false,
) {
  if (Array.isArray(vnode)) {
    return vnode.map(item => deepCloneElement(item, nodeProps, override, mergeRef));
  } else {
    // 此处会把上述的children内容做clone处理
    const cloned = cloneElement(vnode, nodeProps, override, mergeRef);
    if (Array.isArray(cloned.children)) {
      cloned.children = deepCloneElement(cloned.children as VNode<T, U>[]);
    }
    return cloned;
  }
}

所以需要判断vnode是否合法才能做clone处理!

@tangjinzhou tangjinzhou merged commit c1454bc into vueComponent:main Nov 11, 2023
@tangjinzhou
Copy link
Member

3.x 也可以提一个

@huiliangShen huiliangShen deleted the fix/carousel-component-can-not-use-jsx-render-children branch November 11, 2023 13:45
@huiliangShen
Copy link
Contributor Author

3.x 也可以提一个

ok

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants