反応コンポーネント内のスクレイプされたSVGをレンダリングする

Question

githubから私のプロファイルカレンダーをスクラップする機能があります。私はSVGをうまく使っています。それから私はそれを状態に設定しました（おそらく問題？）。私はそれが文字列として設定されていることを認識します。これはおそらく間違っています。これを達成するための方法は何ですか？ここに私のコンポーネントコードです。

私も

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

あなたは文字列に<img>要素のsrcを設定しています。 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}`; 
 

 
}

Answer 2

[OK]を、私は解決策を考え出しました。 （最善ではないことはできますか？）

私はあなたが例をお願いすることができますので、

<span dangerouslySetInnerHTML={{__html: svg}} />