将自定义组件作为触发器传递时，语义的弹出窗口不显示

Question

我只是想用一个可选的popupContent制作一个切换按钮组件，要么只渲染按钮，要么将其放在<Popup />组件(semantic-ui-react(中，即悬停时显示工具提示。如果我在Popup的trigger道具中定义了按钮，但如果我将按钮制作成一个单独的组件并将其传递给道具，则我遇到了一个组件工作正常的问题。

工作示例：

return (
<Popup
content={popupContent}
trigger={
<Button onClick={updateFilters} size="mini" icon basic={!active} primary={active}>
<Icon name="filter" />
</Button>
}
/>
)

我想做的-工作，否则，但弹出窗口没有显示：

const Toggle = () => (
<Button onClick={updateFilters} size="mini" icon basic={!active} primary={active}>
<Icon name="filter" />
</Button>
)
return popupContent ? <Popup content={popupContent} size="mini" trigger={<Toggle />} /> : <Toggle />

请注意，我尝试过不使用三元；它不是罪魁祸首。我在这里错过了什么？

Answer 1

发现问题与此问题有关：https://github.com/Semantic-Org/Semantic-UI-React/issues/1413

解决方案是将trigger节点封装在<div>中(对我来说，<span>搞砸了工具提示的定位(。

return popupContent ? (
<Popup
content={popupContent}
size="mini"
trigger={
<div>
<Toggle />
</div>
}
/>
) : (
<Toggle />
)

Answer 2

您的解决方案不正确，"问题"；自定义组件是指您不按比例分配传递的道具。

Popup组件正在将道具传递给触发器组件，它应该处理这些道具，如果不处理它们，它将无法工作：]。

将您的自定义Toggle更改为以下内容：

const Toggle = (props) => (
<Button
{...props}
onClick={() => console.log("button-clicked")}
size="mini"
icon="filter"
basic={true}
primary={true}
/>
);

一个工作示例：https://codesandbox.io/s/semantic-ui-react-forked-0ftrc?file=/index.js