Question

我想创建一个像这样渲染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节点，然后使用＆＃34; getTotalLength（）＆＃34;方法就可以了。但是我在控制台中获得了路径元素的以下输出：

Element: <path d="M11.859375,0.88671875 C9.10229798,32.1448978 3.72401281,62.1847019 0.921875,92.3632812" id="Path"></path>

对于＆＃34; element.getTotalLength（）＆＃34;这样：

Uncaught TypeError: element.getTotalLength is not a function

我不知道为什么它会像这样。我希望得到DOM元素并使用＆＃34; getTotalLength（）＆＃34;。

有谁知道我做错了什么？

Answer 1

没有svg的路径确实支持getTotalLength（）函数。

它有效

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

Answer 2

您缺少svg标记，您可以先分配组件的参考，然后使用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>
    )
  }
}

参考svg <path>没有＆＃34; getTotalLength（）＆＃34; -Method

2 个答案: