我想显示在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} height="34" width="3" 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
单独的部件,则问题是,工具提示显示用于togather两个不同的组件。
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} height="34" width="3" 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/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>
);