代码之家  ›  专栏  ›  技术社区  ›  Gaurang Shah

使用Redux在SVG组件上显示引导工具提示

  •  0
  • Gaurang Shah  · 技术社区  · 5 年前

    我正在尝试在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

    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/8zzk6qq662

    1 回复  |  直到 5 年前
        1
  •  0
  •   Mohamed Ramrami    5 年前

    主要问题是,您使用相同的状态打开所有工具提示。解决此问题的一种方法是使用工具提示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>
      );