Reactで、なまら強引にHTMLを表示させる

usage

ユーザーからお堅い文章（利用規約とか）が、HTMLファイルで渡される。
typoとか、知らねーし。

ファイル読み込んで突っ込めば良いんじゃね？

App.htm

<div class="hard">
    <h1 class="hard__title">お堅いタイトル</h1>
    <p class="hard__context">お堅い内容</p>
</div>
<style>
    .hard__title { color: red; }
    .hard__context { font-weight: 700; }
</style>

App.js

import React, { Component } from 'react';
import file from './App.htm';

class App extends Component {
  componentDidMount() {
    fetch(file)
      .then( res => res.text() )
      .then( text => document.querySelector('#inner').innerHTML = text );
  }

  render() {
    return (
      <div id="inner"></div>
    )
  }
}
export default App;

htmlファイルだと、なんか怒られた

create-react-appだと、なんか怒られたのでhtmに拡張子を変更。
ダブルクリックで、ブラウザ立ち上がるから良いよね。