带有 Redux 的 ReactJS 在 SVG 组件上显示引导工具提示
Posted
技术标签:
【中文标题】带有 Redux 的 ReactJS 在 SVG 组件上显示引导工具提示【英文标题】:ReactJS with Redux show bootstrap tooltip on SVG component 【发布时间】:2019-07-04 13:38:11 【问题描述】:我正在尝试在 SVG 组件上显示工具提示。对于工具提示,我正在尝试使用 reactstap
组件。
如果我在 SVG 中使用普通组件,它不会呈现 SVG 组件。
getServiceStatus = (serviceStatus, serviceName) =>
return Object.keys(serviceStatus).map((date, index) =>
const downTime = serviceStatus[date].filter(value => return value === 0 ).length
const color = downTime ? "#bcbe2a" : "#36b37e"
const toolTipText = downTime ? date + "No DownTime report for this date" : date + " service was down for " + downTime
return (
<span key=index>
<rect key=date id=serviceName+'-'+ index x=(index + 1) * 5 y="0" fill=color />
<Tooltip placement="top" isOpen=this.props.toolTipOpen target=serviceName+'-'+ index toggle=this.toggleToolTip>
toolTipText
</Tooltip>
</span>
)
)
如果我为 SVG
和 Tooltip
创建单独的组件,那么问题是,工具提示会同时显示两个不同的组件。
getServiceStatus = (serviceStatus, serviceName) =>
return Object.keys(serviceStatus).map((date, index) =>
const downTime = serviceStatus[date].filter(value => return value === 0 ).length
const color = downTime ? "#bcbe2a" : "#36b37e"
const toolTipText = downTime ? date + "No DownTime report for this date" : date + " service was down for " + downTime
return (
<rect key=date id=serviceName+'-'+ index x=(index + 1) * 5 y="0" fill=color />
)
)
getToolTip = (serviceStatus, serviceName) =>
console.log(serviceStatus.toString())
return Object.keys(serviceStatus).map((date, index) =>
const downTime = serviceStatus[date].filter(value => return value === 0 ).length
const toolTipText = downTime ? date + "No DownTime report for this date" : date + " service was down for " + downTime
return (
<span key=index>
<Tooltip placement="top" isOpen=this.props.toolTipOpen target=serviceName+'-'+ index toggle=this.toggleToolTip>
toolTipText
</Tooltip>
</span>
)
)
https://codesandbox.io/s/8zzk6qq662
【问题讨论】:
你能在codesandbox.io/s/new复制这个吗? 给你。 codesandbox.io/s/8zzk6qq662 【参考方案1】:主要问题是您使用相同的状态来打开所有工具提示。解决此问题的一种方法是使用工具提示 ID。
完整代码:https://codesandbox.io/s/2vv782j6z0
动作:
export function toogleToolTipAction(id)
console.log("toogleToolTipAction", id);
return
type: "TOOGLE_TOOLTIP",
id // here i'm using the tooltip id
;
减速器:
case "TOOGLE_TOOLTIP":
return
...state,
toolTipOpen: action.id // here i'm using the tooltip id
;
容器:
const mapDispatchToProps = dispatch =>
return
fetchServiceStatus: () => dispatch(getServiceStatusAction()),
toogleToolTip: id => dispatch(toogleToolTipAction(id)), // here i'm using the tooltip id
dummy: () => dispatch(toogleToolTipAction())
;
;
组件:
toggleToolTip = (id, e) =>
if (e.type === "mouseout")
this.props.toogleTooltip(null);
else
this.props.toogleTooltip(id);
;
和
return (
<span key=index>
<Tooltip
placement="top"
isOpen=this.props.toolTipOpen === serviceName + "-" + index
target=serviceName + "-" + index
toggle=this.toggleToolTip.bind(this, serviceName + "-" + index)
>
toolTipText
</Tooltip>
</span>
);
【讨论】:
谢谢,它成功了。但是我想知道 reactstrap 网站上给出的示例如何在不使用唯一 id 的情况下工作。 reactstrap.github.io/components/tooltips 每个组件使用一个工具提示以上是关于带有 Redux 的 ReactJS 在 SVG 组件上显示引导工具提示的主要内容,如果未能解决你的问题,请参考以下文章
使用带有 reactjs 和 redux 的 Material-ui 复选框