带有 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>
            )
        )
    

如果我为 SVGTooltip 创建单独的组件,那么问题是,工具提示会同时显示两个不同的组件。

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 复选框

如何使用 reactjs 和 redux 处理导航

React js,redux 消费 api

Redux - ReactJS 应用程序不会重新渲染(尽管 JSON.parse 用于新对象)

Redux/Flux(使用 ReactJS)和动画

redux的中间层 --reactjs学习