React Bootstrap - 条件 OverlayTrigger 的最佳实践

Question

我们有一个按钮，我们希望根据某些条件启用或禁用。此外，我们希望按钮在禁用时的悬停效果显示工具提示，解释其禁用原因。

目前，我们有这样的事情：

export class NextButton extends React.Component {
    makePopover () {
        return (
            this.props.someCondition && <Popover>Please enter a title.</Popover>
        )
    }

    render () {
        return (
            <div>
                <OverlayTrigger placement='top' overlay={this.makePopover()}>
                    {/* wrap this in a div so when the button is disabled, the popover still works */}
                    <div>
                        <Button
                            onClick={() => this.props.goToNextPage()}
                            disabled={this.props.someCondition}
                        >
                            Next
                        </Button>
                    </div>
                </OverlayTrigger>
            </div>
        );
    }
}

现在，如果我们仔细查看该makePopover函数，如果someCondition为 false，Popover则不会呈现并OverlayTrigger在返回任何没有 id 的内容时抛出错误。

因此，为了解决这个问题，我们尝试了：

this.props.someCondition ? <Popover>...</Popover> : <span>...</span>

这有帮助，但显示了其他警告：

警告：标签上的未知道具placement, arrowOffsetLeft, arrowOffsetTop, positionLeft, positionTop。从元素中删除这些道具。

现在，不是有条件地显示 Popover，我们可以将条件包裹在整个OverlayTrigger自身周围，执行如下操作：

this.props.someCondition
?
    <OverlayTrigger>
        <Button>Next</Button>
    </OverlayTrigger>
:
<Button>Next</Button>

如何处理条件工具提示的最佳实践是什么？任何帮助将不胜感激。

Answer 1

我面临着同样的问题，我认为解决它的最干净的方法是使用条件包装器。

const ConditionalWrapper = ({
    condition,
    wrapper,
    children,
}) => (condition ? wrapper(children) : children);


export class NextButton extends React.Component {
    render () {
        return (
            <div>
                <ConditionalWrapper
                    condition={this.props.someCondition}
                    wrapper={children => (
                        <OverlayTrigger
                            overlay={<Popover>Please enter a title.</Popover>}
                            placement='top'
                        >
                            {children}
                        </OverlayTrigger>
                        )}
                >
                    {/* wrap this in a div so when the button is disabled, the popover still works */}
                    <div>
                        <Button
                            onClick={() => this.props.goToNextPage()}
                            disabled={this.props.someCondition}
                        >
                            Next
                        </Button>
                    </div>
                </ConditionalWrapper>
            </div>
        );
    }
}