Reactjs React Bootstrap-条件叠加触发器的最佳实践

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

目前，我们有这样的产品：

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

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

警告：未知道具

位置

，

箭头偏左

， 标签上的

箭头偏移设置

，

位置左侧

，

位置顶部

。去除 这些道具来自元素

现在，我们不必有条件地显示Popover，而可以将条件包装在整个

OverlayTrigger

本身周围，执行如下操作：

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

this.props.someCondition
?
下一个
:
下一个

---

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

我遇到了同样的问题，我认为最干净的解决方法是使用条件包装器

const ConditionalWrapper=({
条件
包装纸，
儿童
})=>（条件？包装器（子项）：子项）；
导出类NextButton扩展React.Component{
渲染（）{
返回(
(
{儿童}
)}
>
{/*将其包装在一个div中，这样当按钮被禁用时，popover仍然可以工作*/}
this.props.goToNextPage（）}
disabled={this.props.someCondition}
>
下一个
);
}
}

以下是亚历克西斯（Alexus）对库塔卡（CoolTarka）的打字脚本回答：

interface IConditionalWrapperProps {
    condition: boolean;
    wrapper: (children: React.ReactNode) => JSX.Element;
    children: JSX.Element;
}

const ConditionalWrapper = ({
    condition,
    wrapper,
    children,
}: React.PropsWithChildren<IConditionalWrapperProps>) => (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>
    );
}

接口IConditionalWrapperProps{
条件：布尔；
包装器：（子级：React.ReactNode）=>JSX.Element；
子元素：JSX.Element；
}
const ConditionalWrapper=({
条件
包装纸，
儿童
}：React.PropsWithChildren）=>（条件？包装器（子项）：子项）；
导出类NextButton扩展React.Component{
渲染（）{
返回(
(
{儿童}
)}
>
{/*将其包装在一个div中，这样当按钮被禁用时，popover仍然可以工作*/}
this.props.goToNextPage（）}
disabled={this.props.someCondition}
>
下一个
);
}

如何为ConditionalWrapper中的参数对象创建typescript接口？我在这里尝试了多种方法，但总是以打字错误告终。。。

interface IConditionalWrapperProps {
    condition: boolean;
    wrapper: (children: React.ReactNode) => JSX.Element;
    children: JSX.Element;
}

const ConditionalWrapper = ({
    condition,
    wrapper,
    children,
}: React.PropsWithChildren<IConditionalWrapperProps>) => (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>
    );
}