反応コンポーネントを入力と動的にロードしてレンダリングする[type = file]

Question

私は、反応型jsコンポーネントをhtmlファイル入力を通じて動的にロードしたいと考えています。基本的には、私が行ったのと同じ効果を達成したいと思います。import Foo from ./foo.js

html要素のonChangeイベントの後にファイルをテキストとして読み取ることはできますが、それで何をするのか分かりません。私の目標を達成することさえ可能ですか？ありがとう！

onChange(e) { 
    var fr = new FileReader() 

    fr.addEventListener('load', f => { 
    window.console.log(f.target.result.substring(0, 500)) 
    // yields: import React, { Component } from 'react' ... class Foo extends Component { ... 
    // but now what? 
    }) 

    fr.readAsText(e.target.files[0]) 
} 

Answer 1

これで、babel-standaloneで動作するようになりました。しかし、私はステートレスで機能的なコンポーネントしか使用できません。私の実装を改善できるかのように感じます。たとえば、私はどのようにしてstring.prototype.replaceする必要があります好きではありません。

とにかく、私のために働いたことは、うまくいけば、それもあなたを助けるかもしれません。

// fileToBeLoaded.js 
const elem =() => <h1>Hello, world!</h1> 

// foo.js 
import React, { Component } from 'react' 
import { transform } from 'babel-standalone' 

class Foo extends Component { 
    constructor(props) { 
     super(props) 

     this.state = { 
      elem: undefined 
     } 

     this.handleChange = this.handleChange.bind(this) 
    } 

    handleChange(e) { 
     let fr = new FileReader() 

     fr.addEventListener('load', e1 => { 
      let s = e1.target.result 
      let result = transform(s, { 
       presets: ['es2015'], 
       plugins: ['transform-react-jsx'] 
      }) 

      let s1 = result.replace(`'use strict'; 

      let elem = function elem(props) {`, 'elem = function(props) {') 

      let elem =() => {} 
      elem = eval(s1) 

      this.setState({elem}) 
     }) 

     fr.readAsText(e.target.files[0]) 
    } 

    render() { 
     const Elem = this.state.elem ? this.state.elem :() => <h1>No elem!</h1> 
     return (
      <div> 
       <input type="file" onChange={this.handleChange} 
       <Elem /> 
      </div> 
     ) 
    } 
}