reactjs - React Office UI Fabric - hoverCard 模式

Question

我对办公室 UI 结构非常陌生。我正在尝试仅显示 hoverCard 的紧凑卡。我试图提供mode : ExpandingcardMode.compact，但它不起作用。

我怎样才能让它工作？

render() 
{
    const expandingCardProps = {
        onRenderCompactCard: this.renderCompactCard,
        mode : ExpandingCardMode.compact,
    };
    return (
        <div>
            <HoverCard
                expandingCardProps={expandingCardProps}
                instantOpenOnClick={true}
                expandedCardOpenDelay={0}
                trapFocus={true}

                openHotKey={KeyCodes.enter}
            >
                <button> new York City</button>
            </HoverCard>
        </div>
    );
}
renderCompactCard = item => {
    return (
        <div >
            In the HoverCard
        </div>
    )
}
</div>
);
};

Answer 1

从文档：

expandingCardProps：与type设置为 HoverCardType.expanding 的道具一起使用。ICardProps 和 IExpandingCardProps 中的参考详细信息属性。

如果您还包括类型HoverCardType.expandingon <HoverCard>，它是否解决了您的问题？