reactjs - 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是假的， Popover不会被渲染并且 OverlayTrigger如果返回没有 id 的任何内容，则会引发错误。

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

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

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

Warning: Unknown props placement, arrowOffsetLeft, arrowOffsetTop, positionLeft, positionTop on tag. Remove these props from the element.

现在，我们可以将条件包裹在整个 OverlayTrigger 周围，而不是有条件地显示 Popover。本身，做类似的事情:

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