我们有一个按钮,我们希望根据某些条件启用或禁用。此外,我们希望按钮在禁用时的悬停效果显示工具提示,解释其禁用原因。
目前,我们有这样的事情:
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>
如何处理条件工具提示的最佳实践是什么?任何帮助将不胜感激。
最佳答案
我面临着同样的问题,我认为解决它的最干净的方法是使用条件包装器。
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>
);
}
}
关于reactjs - React Bootstrap - 条件 OverlayTrigger 的最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57958213/