Question

我不能为我的生活弄清楚这里出了什么问题。我有以下组件：

import React, { Component } from 'react';

class MySvg extends Component {
  render() {
    return (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {this.props.width} {this.props.height}"></svg>
    );
  }
}

export default MySvg;

当我尝试渲染组件时，出现以下错误：

Error: <svg> attribute viewBox: Expected number, "0 0 {this.props.widt…"...

我100％确定两个道具都是数字。我在console.log时有一个typeof号码，它们作为数字传递。这是React的问题吗？

Answer 1

问题是你的道具在字符串里面，因此没有评估和分配。请改用这样的东西。

<svg xmlns="http://www.w3.org/2000/svg" viewBox={"0 0 "+ this.props.width + " " + this.props.height}></svg>

通过这种方式，我们基本上通过在括号内连接道具和字符串来创建值。因为括号内是全部JavaScript。

Answer 2

您还可以使用字符串插值以更易读的方式解决此问题：

<svg xmlns="http://www.w3.org/2000/svg" viewBox=`0 0 ${this.props.width} ${this.props.height}`></svg>

React的SVG视图框错误

2 个答案: