错误 无法读取带有样式组件的 React 语义 UI 弹出窗口中未定义的属性'left'

Question

我有一个这样的样式组件：

import styled from 'styled-components';
const TagIcon = styled(Icon).attrs({
name: 'tag',
})`
cursor: pointer;
font-size: 14px !important;
`

如果我在语义 ui-react 布局中使用它，它在大多数情况下都可以正常工作。 但是，如果我将其用作 SUI 弹出窗口组件的触发器，则会导致崩溃：

<Popup content="Test Popup" trigger={<TagIcon />} />
Load Page = ... Unhandled Rejection (TypeError): Cannot read property 'left' of undefined
getBoundingClientRect
src/utils/getBoundingClientRect.js:38
35 | catch(e){}
36 | 
37 | const result = {
> 38 |   left: rect.left,
| ^  39 |   top: rect.top,
40 |   width: rect.right - rect.left,
41 |   height: rect.bottom - rect.top,
...
Popper.update$$1
src/index.js:94
91 | // We can't use class properties because they don't get listed in the
92 | // class prototype and break stuff like Sinon stubs
93 | update() {
> 94 |   return update.call(this);
| ^  95 | }
96 | destroy() {
97 |   return destroy.call(this);

如果我用等效的(ish(组件替换"TagIcon"样式的组件，它可以正常工作：

<Popup content="Test Popup" trigger={<Icon name="tag">} />

有人遇到这个问题并有解决方案吗？ 如果这是一个问题，我不确定要在哪个 git 项目中报告这个问题，因为似乎可能只是与样式组件和语义 ui-反应(或者可能还有语义 ui(之间的幕后工作方式存在冲突。

Answer 1

更新：选项 1

另一种解决方案可能是最简单的解决方法，即用纯 HTML 标签包装您的触发器元素，并向其添加一个 ref 以用作Popup的上下文，如下所示：

import React, { createRef } from 'react';
import { Button, Popup } from 'semantic-ui-react';
const StyledButton = styled(Button)`
color: purple;
`
class PopupUser extends React.Component {
contextRef = createRef()
render() {
return <Popup
trigger={<span ref={this.contextRef}>
<StyledButton content='Trigger Popup' />
</span>}
context={this.contextRef}
content='Hello'
position='top center'
/>;
}
}

注意：这可能并不总是一个选项，具体取决于您使用trigger，但应该适用于大多数用例 - 如果包装block elements，请务必将span换成div。

---

选项 2

与 Patrick 的答案类似，您需要包装触发器组件，使其在语义 UI 弹出窗口中正常运行。

如果您打算使用Semantic UI Icon component，您可以像这样包装它：

const Icon = forwardRef(
({className, name, ...props}, ref) =>
<i
aria-hidden="true"
className={`${name} icon ${className}`}
{...props}
ref={ref}
/>
);

再说一次，之后只需正常使用它：

const TagIcon = styled(Icon)`
width: 40px;
`

}/>

注意：我尝试直接包装 Icon 组件，而不是重新创建组件的小版本，但它没有很好地发挥作用。

Answer 2

我遇到了同样的问题，并在最终发现它实际上很容易解决之后调试了几个小时！问题是由于某种原因popper.js没有收到DOM ref来计算左/顶/宽/高，所以你需要使用forwardRef和ref"手动"传递它，例如：

// Your Icon component 
const Icon = forwardRef(
(props, ref) => (
<img
src={props.url}
ref={ref}
/>
)
);

之后只需正常使用它：

const TagIcon = styled(Icon)`
width: 40px;
`
<Popup content="Test Popup" trigger={<TagIcon url="https://test-image.com">} />

我希望它对某人有所帮助！