Reactjs SVG viewbox错误与React

我一辈子都搞不清楚这里出了什么问题。我有以下组成部分：

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;

import React，{Component}来自'React'；
类MySvg扩展组件{
render（）{
返回(
);
}
}
导出默认MySvg；

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

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

错误：属性viewBox:应为数字，“0 0{this.props.widt…”。。。

---

我100%确定这两个道具都是数字。当I console.log时，它们有一个数字类型，并作为数字传递。这是React的问题吗？

问题是您的道具在字符串中，因此不会计算和分配。请改用类似的方式

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

---

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

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

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