将自定义组件作为触发器传递时，Semantic 的 Popup 不显示

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

将自定义组件作为触发器传递时，Semantic 的 Popup 不显示

Semantic's Popup does not show up when passing a custom component as trigger

javascript

reactjs

semantic-ui-react