reactjs - 我们可以在 G6.menu 的 getContent 函数中使用 React Component 吗?
问题描述
如文档所述, getContent 函数返回HTMLDivElement / string
.
我们可以在 G6.menu 的 getContent 函数中使用 React Component 吗?
转载链接
重现步骤
我尝试在 innerHTML 中分配一个 React 组件,但它不起作用。
const contextMenu = new G6.Menu({
getContent(evt) {
const outDiv = document.createElement("div");
outDiv.style.width = "180px";
outDiv.innerHTML = `<Menu />`;
return outDiv;
},
handleMenuClick: (target, item) => {
console.log(target, item);
},
// offsetX and offsetY include the padding of the parent container
offsetX: 16 + 10,
offsetY: 0,
itemTypes: ["node", "edge", "canvas"]
});
环境 | 信息 |
---|---|
g6 | 4.3.4 |
系统 | macOS 10.15.6 |
浏览器 | 铬 91.0.4472.77 |
解决方案
const contextMenu = new G6.Menu({
getContent(evt) {
const outDiv = document.createElement("div");
ReactDOM.render(<Menu />, outDiv)
return outDiv;
},
handleMenuClick: (target, item) => {
console.log(target, item);
},
// offsetX and offsetY include the padding of the parent container
offsetX: 16 + 10,
offsetY: 0,
itemTypes: ["node", "edge", "canvas"]
});
推荐阅读
- php - Symfony 约束小于日期
- laravel - 如何从 Laravel 集合中仅获取特定属性?
- javascript - 如何为箭头函数解析此绑定?
- javascript - 下载完成时检测并通知
- linux - 如何从客户端保持 telnet 连接处于活动状态
- java - ObjectMapper 在映射到 JSON 时会忽略一些字段
- php - PHP 变量隐藏字符串值
- android - 如何检查用户输入的数字是否为整数?
- html - 使用 CSS 背景图像的响应式图像
- angular - 使用 HttpClient 和 file-saver.js 下载文件会获取 JHipster 应用程序加载页面以及请求的下载文件