javascript - 在 React 组件中渲染抓取的 SVG

Question

我有一个功能可以从 github 上抓取我的个人资料日历。我得到的 SVG 很好。然后我将其设置为state(可能是问题？)。我意识到它被设置为字符串。这可能是错误的。有哪些方法可以实现这一目标？这是我的组件代码。

我也收到了

Public-Key-Pins: The site specified a header that did not include a matching pin.

错误...这不相关。只是想我会把它扔在那里。

import React from 'react'
import cheerio from 'cheerio'
import axios from 'axios'

const baseURL = 'https://crossorigin.me/https://github.com/'

function getSVG(user) {
    return new Promise((resolve, reject) => {
        const url = baseURL + user
        axios.get(url).then(res => {
            const load = cheerio.load(res.data)
            const parsed = load(".js-calendar-graph").html()
            const svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 720 120"> ' + parsed + ' </svg>';
            resolve(svg)
        }).catch(err => reject(err));
    })
}

export default class extends React.Component {
    constructor() {
        super()
        this.state = {
            svg: ''
        };
    }
    componentWillMount() {
        getSVG('archae0pteryx').then(svg => {
            // console.log("SVG ", svg)
            this.setState({ svg: svg });
        });
    }
    render() {
        const { svg } = this.state;
        console.log(this.state.svg)
        return (
            <div>
                <img src={svg} alt="github contrib cal"/>
            </div>
        )
    }
}

Answer 1

您正在设置src的<img>元素到字符串。您可以设置svg变量为 data URL 呈现预期结果。

onload = () => {

  const svg = `<svg viewBox="26.5 29.75 139 132.5" xmlns="http://www.w3.org/2000/svg" width="72" height="69"><g transform=" translate(18.092307051356855 25.442089405002434) scale(0.7839767843888619)"><defs><style>.cls-1{fill:#404041;}.cls-2{fill:#323232;}.cls-3{fill:#58595b;}.cls-4{fill:#fff;}</style></defs><title>-</title><path class="cls-1" d="m99.54 11s-0.27 0 0 0 0 0 0 0z"></path><path class="cls-2" d="M126.8,164.59c21.85-12.37,50.07,6.09,50.07,6.09l-22.31-64.6a73.27,73.27,0,0,0-8.65-11.86l-.1,18.63-.94,15.2s-.83,4.86-2.46,10.77c-1.82,6.58-4.64,14.46-8.42,18.38-7.18,7.43-7.19,7.39-7.19,7.39"></path><path class="cls-2" d="m64.76 157.3c-3.69-3.82-6.46-11.39-8.29-17.83-1.72-6.09-2.6-11.18-2.6-11.18l-0.94-15.36-0.09-18.53a73.5 73.5 0 0 0 -8.66 12l-22.18 64.31c26.58-14.87 49.82-6.16 49.92-6.1s-0.53-0.46-7.16-7.31z"></path><path class="cls-3" d="m72 166.6z"></path><path d="M184.57,146.84c-9.78-21.83-25.88-54.49-25.88-54.49s-3.15-3.79-3.15-18.37,4.94-62.08-56-62.89c-63,.81-56.12,48.4-56.12,62.86s-3,18.33-3,18.33-16.21,32.75-26,54.57S22,170.68,22,170.68l22.15-64.35a73.5,73.5,0,0,1,8.66-12,18.52,18.52,0,0,1,3.87-3.25s11.46-8,21.93-2.8c9.81,4.92,12.32,8.92,19.85,9.4l1.7,0c8.8,0,9.47-4.25,19.93-9.5S142,91,142,91a18.7,18.7,0,0,1,3.87,3.24,73.27,73.27,0,0,1,8.65,11.86l22.31,64.6S194.34,168.66,184.57,146.84Z"></path><path class="cls-3" d="M142,91s-11.46-8-21.92-2.73-11.13,9.5-19.93,9.5l-1.7,0c-7.53-.48-10-4.48-19.85-9.4-10.46-5.25-21.93,2.8-21.93,2.8a18.52,18.52,0,0,0-3.87,3.25l.09,18.53.94,15.36s3.7,21.58,10.89,29c6.63,6.86,7.15,7,7.19,7v-.32H126.8s0,.37,7.19-7.06,10.88-29,10.88-29l.94-15.12.1-18.59A18.42,18.42,0,0,0,142,91ZM73.75,117c-20.22-4.72-7.1-21.4-7.1-21.4,5.11-6.79,22.44,6.16,22.44,6.16S94,121.73,73.75,117Zm54,0c-20.22,4.72-15.34-15.23-15.34-15.23s17.33-12.95,22.44-6.16C134.89,95.62,148,112.29,127.79,117Z"></path><path class="cls-4" d="M74.94,164.1a3.31,3.31,0,1,0,3.31,3.31A3.31,3.31,0,0,0,74.94,164.1Zm49.59,0a3.31,3.31,0,1,0,3.31,3.31A3.31,3.31,0,0,0,124.53,164.1ZM99.73,131a3.31,3.31,0,0,0-3.31,3.31v3.31H103v-3.31A3.31,3.31,0,0,0,99.73,131Z"></path><path d="m128.4 161.6l-7.68-7.46-12.75-18.51v-1.32c0-3.65-3.4-6.61-7-6.61s-7 3-7 6.61v1.32l-13.35 18.52-8.13 7.46a6.59 6.59 0 0 0 -3.45 5.77 6.74 6.74 0 0 0 6.61 6.75c2.44 0 4.54-1.76 5.69-3.17h38.21c1.15 1.41 3.25 3.17 5.69 3.17a6.68 6.68 0 0 0 3.17 -12.52z"></path><polygon class="cls-2" points="86.51 164.1 93.12 164.1 93.12 146.7 86.51 155.8"></polygon><polygon class="cls-2" points="106.4 146.7 106.4 164.1 113 164.1 113 155.8"></polygon><rect class="cls-2" x="96.43" y="144.3" width="6.61" height="19.84"></rect><path class="cls-4" d="m74.94 164.1a3.31 3.31 0 1 0 3.31 3.31 3.31 3.31 0 0 0 -3.31 -3.31zm49.59 0a3.31 3.31 0 1 0 3.31 3.31 3.31 3.31 0 0 0 -3.31 -3.31z"></path><rect x="93.34" y="96.13" width="14.22" height="44.07"></rect><path class="cls-4" d="M100.71,131a4.28,4.28,0,0,0-4.28,4.28v4.28H105v-4.28A4.28,4.28,0,0,0,100.71,131Z"></path><path class="cls-2" d="M101.13,98.72c4,0,6.84-1,8.25-2.56v-90H91.07V96c4.23,1.49,5,2.49,8.3,2.7Z"></path></g></svg>`;

  const mediaType = "data:image/svg+xml";

  const img = new Image;

  img.onload = () => document.body.appendChild(img);

  img.src = `${mediaType},${svg}`;

}