文本内容未在反应中呈现

Question

我正在尝试使用d3js和linechart创建一个tooltip。 当鼠标在图表上时，应该出现一个工具提示，向我显示该点的值，它可以正常工作，但问题是，即使我在控制台中看到它的值，tooltipText的内容也无法呈现

这是我的代码：

class Tooltip extends Component{

    render(){

        if(this.props.showTooltip){
            var focusXtranslate;
            var focusYtranslate;

            this.props.focusXtranslate === "" ?  focusXtranslate = 0 : focusXtranslate = this.props.focusXtranslate;
            this.props.focusYtranslate === "" ?  focusYtranslate = 0 : focusYtranslate = this.props.focusYtranslate;

            return(
                <g className="focus" transform={"translate(" + focusXtranslate + "," + focusYtranslate + ")"}>  
                    <line className={"x-hover-line hover-line"} x1={"910"} x2={"910"}></line>
                    <line className={"y-hover-line hover-line"} y1={"0"} y2={this.props.height -  focusYtranslate}></line>
                    <circle r={"7.5"}></circle>
                    <text id="tooltipText" x={"15"} dy={".31em"}>{this.props.focusValue}</text>
                </g>
            );
        } else {
            return null;
        }
    }
}

export default Tooltip;