使用react和react-svg-loader更改SVG中的文本

Question

我使用react-svg-loader加载我的svg文件，但希望通过react设置其中的文本。

反应，例如：

import MyImage from '../img/my_image.svg'

export default class Show extends Component {
    constructor(props){
        super(props)

        this.state = {text: "show this"} // How do I get this into the SVG?
    }
    render(){
        return (<MyImage />)
    }
}

SVG例如：

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="450">
    <rect
        x="0"
        y="0"
        width="300"
        height="450"
        fill="#d0d0d0"
    />
    <text
        id="textInHere"
        ref="textInHere"
        x="50%"
        y="50%"
        fill="#7d7d7d">
        The text should go here
    </text>
</svg>

我似乎无法访问反应中的ref，并且通过id访问是不受欢迎的。

如果能让这个过程变得更轻松，我很乐意改变我的装载机。