Question

我有一个组件，并且希望在鼠标悬停在“ Persona”元素上时使用Office-UI-Fabric-react组件“ Callout”。
如果我引用包含“ Persona”元素的“ div”，则“标注”有效
（使用ref={this.setPersonaRef}），
但是“ Persona”元素中的componentRef={this.setPersonaRef}导致

CalloutContent.componentDidMount（）中的异常：TypeError： element.getBoundingClientRect不是函数

以下是组件：

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>;     
    }
}

如何解决该异常？

Answer 1

如果您在组件级别定义 ref

像这样：

<SomeComponent ref={yourRef} />

您将从来自组件上呈现的第一个元素的 getBoundingClientRect() 属性中获得 node

yourRef.current.node.getBoundingClientRect()

Answer 2

由于使用getBoundingClientReact或其他类似方法，因此需要指向current的{{1}}属性。

文档说：

useRef （或简单类ref）返回一个可变的ref对象，该对象的 .current属性初始化为传递的参数 （initialValue）。返回的对象将保留整个生命周期组件的
。

现实生活中的例子：

ref

工作Codesandbox（以滚动显示结果，而不是使用浏览器控制台的codeandbox控制台）

反应：element.getBoundingClientRect不是函数

2 个答案: