Question

我试图创建一个将图像元素更改为内联svg元素的React组件。我想这样做，所以我可以从文件中插入svg元素，以便用css处理样式。

同样重要的是，我正在为我的项目使用create-react-app存储库，并希望能够在不弹出我的项目的情况下执行此操作。

变量req返回一个有效的svg元素，我设置this.state.response然后我尝试更新但是它没有用。它不起作用。使用下面的代码我收到以下错误：

 A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

代码：

class Svg extends Component {

constructor(props) {
    super(props);
    this.state = {
        response: undefined
    };
    this.toSvg(this.props.src);
}

toSvg(img) {
    const imageUrl = img;
    let self = this;

    // Create new XML Http Request to get data
    let request = new XMLHttpRequest();
    request.open('GET', imageUrl, true);

    request.onreadystatechange = function() {
        if (this.readyState === 4) {
            if ((this.status >= 200) && (this.status < 400)) {
                // Success!
                // Returns the HTML object
                let req = request.responseXML.getElementsByTagName('svg')[0];

                self.setState({
                    response : req
                });
            } else {
                // Error :(
            }
        }
    };

    request.send(null);
}

render() {
    if (this.state.response === undefined) {
        console.log('no response rendering standard img');
        return <img src={this.props.src} alt='icon' />;
    }
    else {
        console.log('now we update');
        return this.state.response;
    }
}
}

如果有人知道如何处理svg元素来替换img元素而没有错误，那就太棒了。

Answer 1

使用svg-inline-loader

# add npm package
npm install svg-inline-loader --save-dev

# configure webpack loader
{
    test: /\.svg$/,
    loader: 'svg-inline-loader'
}

# using in react code
<InlineSVG src={require("file.svg")} />

编辑：

目前在create-react-app使用了url-loader。

因此，您可以手动配置文件大小限制以检索数据URL ：

require("url-loader?limit=10000!./file.svg");

Answer 2

使用react-svg结束。

https://www.npmjs.com/package/react-svg

像魅力一样。

Answer 3

现在可以在带有特殊导入语法的create-react-app 2.0中实现

import logoUrl, { ReactComponent as Logo } from './logo.svg';

参考文献：

在React中用inline svg替换image元素

3 个答案: