- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个组件,并且希望当鼠标悬停在“Persona”元素上时使用 Office-UI-Fabric-react 组件“Callout”。
如果我引用包含“Persona”元素的“div”,“Callout”就会起作用
(使用ref={this.setPersonaRef}
),
但“Persona”元素中的 componentRef={this.setPersonaRef}
会导致
Exception in CalloutContent.componentDidMount(): TypeError:element.getBoundingClientRect is not a function
这是组件:
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Persona,PersonaSize } from 'office-ui-fabric-react/lib/Persona';
import { Callout } from 'office-ui-fabric-react/lib/Callout';
import {IHoverPersonaProps} from './IHoverPersonaProps';
import {IHoverPersonaState} from './IHoverPersonaState';
export default class HoverPersona extends React.Component < IHoverPersonaProps,IHoverPersonaState > {
private personaRef: any;
constructor(props) {
super(props);
this.state = {
hover: false
};
this.setPersonaRef = this.setPersonaRef.bind(this);
}
setPersonaRef(element) {
this.personaRef = element;
}
MouseEnter() {
this.setState({hover:true})
}
MouseLeave() {
this.setState({hover:false})
}
public render() : React.ReactElement < IHoverPersonaProps > {
return <div onMouseEnter={this.MouseEnter.bind(this)} onMouseLeave={this.MouseLeave.bind(this)} >
<Persona {...this.props} size={PersonaSize.extraSmall} primaryText={this.props.value} componentRef={this.setPersonaRef} />
{ this.state.hover &&
<Callout
className="ms-CalloutExample-callout"
ariaLabelledBy={'callout-label-1'}
ariaDescribedBy={'callout-description-1'}
coverTarget={false}
gapSpace={0}
target={this.personaRef}
setInitialFocus={true}
>
<div className="ms-CalloutExample-header">
<p className="ms-CalloutExample-title" id={'callout-label-1'}>
Test
</p>
</div>
<div className="ms-CalloutExample-inner">
<Persona {...this.props} size={PersonaSize.large} primaryText={this.props.value} />
</div>
</Callout>
}
</div>;
}
}
如何解决异常?
最佳答案
因为使用 getBoundingClientRect
或其他类似方法,您需要指向 ref
的 current
属性。
来自文档:
useRef (or simple class ref) returns a mutable ref object whose.current property is initialized to the passed argument(initialValue). The returned object will persist for the full lifetimeof the component.
示例:
function App() {
const inputRef = useRef();
const scrollHandler = _ => {
console.log(inputRef.current.getBoundingClientRect());
};
useEffect(() => {
window.addEventListener("scroll", scrollHandler, true);
return () => {
window.removeEventListener("scroll", scrollHandler, true);
};
}, []);
return (
<div ref={inputRef} className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
Codesandbox (要查看结果滚动,请使用浏览器控制台而不是codesandbox控制台)
关于reactjs - 如何解决 "element.getBoundingClientRect is not a function",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51963089/
我有一个在 windows-resize 事件上运行的 JS 函数 在该函数中,我设置了一个变量 width 以用于调整 d3 图表的大小。如果我“手动”调整窗口大小(即:拖动窗口边缘之一),宽度变量
我有一个 ClientRect 对象数组,这是我通过做得到的 var trackedElements = $('[track]'); var trackedBounds = []; _.each(tr
我正在使用 document.body.getBoundingClientRect().right 来查找顶部导航中的所有元素都在 View 之外,以便隐藏它们并将它们放在“更多”下拉列表下。但这个功
我一直在尝试使用一个函数来检测元素是否在视口(viewport)中: function isElementInViewport (el) { var rect = el[0].getBound
所以 jQuery 的 .width() always returns the clientWidth ,不管它是什么。但如果你想要亚像素精度,you have to opt for getBound
这里有一些有趣的东西:在任何 JS 窗口中运行: val = document.body.getBoundingClientRect(); console.log(val) val.left += 1
我对 DOMnode.getBoundingClientRect() 有疑问,因为返回的数据不一致。我正在使用 windows.onload(因为缺少更好的选择)来触发我的函数,该函数采用元素的 ge
下面的代码有什么问题吗? getBoundingClientRect 值并不总是相同,当我滚动后触发该函数时它会发生变化。如果我没有滚动页面,下面的函数才准确(滚动到正确的位置)。 scrollToT
我正在使用 getBoundingClientRect 来了解元素是否在页面中的特定点之上。所以我这样做: var rect = el.getBoundingClientRect(); if (rec
我正在为 ChartJS 使用自定义工具提示并定位工具提示,我需要使用 getBoundingClientRect 来获取图表的位置,然后相对于该位置移动工具提示。但是,从 getBoundingCl
我正在进入 div 元素的控制台顶部、左侧、右侧、底部属性: var offSet = document.getElementById("div").getBoundingClientRect();
我正在尝试向我的网站添加粘性导航,当它滚动到不同的部分时会发生变化。当滚动到带有 .dark 类的部分时,它应该将 Logo 和文本颜色更改为白色……否则为黑色。 下面是我一直在使用的 javascr
我已经在使用 getBoundingClientRect() 将子元素 wrt 的 getBoundingClientRect() 计算为 px 中的父元素并从一个组件传递到另一个组件,并且能够将子元
我正在使用 getBoundingClientRect函数并试图理解它的 top 行为。负顶是什么意思? 在下面的示例中,当您向下滚动时,top 的值变为负值。有人可以解释一下,我如何解释 getBo
这个问题在这里已经有了答案: How best to convert a ClientRect / DomRect into a plain Object (6 个答案) 关闭 3 年前。 func
getBoundingClientRect() 返回元素在 转换后屏幕上的坐标。如何在转换之前 计算这些坐标?即没有转换。 我发现的最简单的方法是: element.style.transform =
我构建了一个组件,该组件将根据其尺寸和在窗口中的位置确定其打开方向。我在 react-dom 节点上使用了 getBoundingClientRect() 函数。现在我已经更新了一些项目包,包括 re
也许这是个愚蠢的问题。 getBoundingClientRect() 返回什么类型?我有以下错误: var logo1: HTMLElement = document.getElementById(
背景:我目前正在开发一个项目,我的 JS 应用程序被嵌入到多个其他(父)JS 应用程序中。某些父应用程序可以通过将 display:block/none 设置为包含我的应用程序的某些元素来显示/隐藏我
我正在尝试获取图像上鼠标单击的坐标。所以我像这样使用 getBoundingClientRect function showCoords(canvas, event) { var rect =
我是一名优秀的程序员,十分优秀!