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.

Sign up for GitHub

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

Jump to bottom

react 节点下 foreignObject 可以不使用body标签名？ #4100

Open
52flutter opened this issue Dec 14, 2023 · 8 comments
Open

react 节点下 foreignObject 可以不使用body标签名？ #4100

52flutter opened this issue Dec 14, 2023 · 8 comments

Comments

@52flutter
Copy link

52flutter commented Dec 14, 2023 •
edited
Loading

Describe the bug

在一些JQ项目和库里，会导致JQuery("body")选择多个节点，dom操作的时候会都触发

Your Example Website or App

https://stackoverflow.com/help/mcve.

Steps to Reproduce the Bug or Issue

渲染antv/x6 react元素
JQuery("body").append("

")

Expected behavior

JQuery("body").append("

")只在document.body下

Screenshots or Videos

image

No response

Platform

  • OS: [e.g. macOS, Windows, Linux]
  • Browser: [e.g. Chrome, Safari, Firefox]
  • Version: [e.g. 2.11.1]

Additional context

No response
@x6-bot
Copy link
Contributor

x6-bot bot commented Dec 14, 2023

👋 @52flutter

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.
We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

@52flutter 52flutter changed the title react 节点下 foreignObject 可以不使用body标签名 react 节点下 foreignObject 可以不使用body标签名？ Dec 14, 2023
@XueMeijing
Copy link
Contributor

可以使用 子元素选择器 > , 限定是html子元素的那个body(html > body) https://developer.mozilla.org/zh-CN/docs/Web/CSS/Child_combinator

image
image
image

@52flutter
Copy link
Author

我知道这样可以 很多库里面写了$('body'),layui就有

@52flutter
Copy link
Author

一个一个改很麻烦 而且不好升级

@lloydzhou
Copy link
Contributor

https://github.com/antvis/X6/blob/master/packages/x6-vue-shape/src/node.ts#L26

可以试试不传primer参数，或者传一个null进去，应该就没有body元素了

@Cedrus-P
Copy link

Cedrus-P commented Jan 7, 2024 •
edited
Loading

为什么这里可以在foreignObject下使用body标签而没有警告，我在项目下使用的其他组件被这个错误的body误导出现错误行为，我尝试在自己的组件下新建一个body屏蔽这个行为，但是 React 给我警告：<body> cannot appear as a child of <foreignObject>.

@XueMeijing
Copy link
Contributor

为什么这里可以在foreignObject下使用body标签而没有警告，我在项目下使用的其他组件被这个错误的body误导出现错误行为，我尝试在自己的组件下新建一个body屏蔽这个行为，但是 React 给我警告：<body> cannot appear as a child of <foreignObject>.

看源码 使用的是createElementNS, 带命名空间的创建可能不一样，我试了下这样确实不报错，但是不知道为什么会创建两个 foreignObject 出来

useEffect(() => {
  var container = document.querySelector(`.${id}`);
  var fo = container.querySelector('foreignObject');
  if (fo) {
    return;
  }

  fo = document.createElementNS('http://www.w3.org/1999/xhtml', 'foreignObject');
  const body = document.createElementNS('http://www.w3.org/1999/xhtml', 'body');
  const content = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');

  fo.setAttribute('width', '120');

  body.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
  body.setAttribute('class', 'ceshiyixia');
  body.style.width = '100%';

  content.style.width = '100%';

  body.appendChild(content);
  fo.appendChild(body);
  container.appendChild(fo);
}, []);

@yjz321
Copy link

yjz321 commented Jan 12, 2024

我也遇到这个问题了，请问解决了吗

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@lloydzhou @52flutter @XueMeijing @yjz321 @Cedrus-P