Reactjs 参考svg<；路径/>；不'；“我没有”；getTotalLength（）-方法

我想创建一个组件，它呈现SVG路径元素，如下所示：

class Path extends Component {
  constructor(props) {
    super(props);

    this.refCallback = this.refCallback.bind(this);
  }

  refCallback(element) {
    console.log("Element: ", element, element.getTotalLength());
  }

  render() {
    const { data, id } = this.props

    return (
      <path d={ data } id={ id } ref={ this.refCallback } />
    );
  }
}

我不知道它为什么会这样。我希望得到DOM元素并使用“getTotalLength（）”

---

有人知道我做错了什么吗？

没有svg的Path支持getTotalLength（）函数

它起作用了

<svg>
   <path d={ data } id={ id } ref={ this.refCallback } />
 </svg>

---

您缺少

svg

标记，您可以先分配组件的ref，然后使用DOM方法

你可以试试这样的

class App extends Component {
  componentDidMount() {
    console.log(this.pathref.getTotalLength());
  }
  render() {
    const { data, id } = this.props
    return(
      <svg>
        <path ref={(ref) => { this.pathref = ref; }} d={ data } id={ id }></path>
      </svg>
    )
  }
}

类应用程序扩展组件{
componentDidMount（）{
log（this.pathref.getTotalLength（））；
}
render（）{
const{data，id}=this.props
返回(
{this.pathref=ref；}}d={data}id={id}>
)
}
}

谢谢，真的很简单！帮了麻省理工很多忙！谢谢你，本尼！没错，svg标记丢失了。

<svg>
   <path d={ data } id={ id } ref={ this.refCallback } />
 </svg>

class App extends Component {
  componentDidMount() {
    console.log(this.pathref.getTotalLength());
  }
  render() {
    const { data, id } = this.props
    return(
      <svg>
        <path ref={(ref) => { this.pathref = ref; }} d={ data } id={ id }></path>
      </svg>
    )
  }
}