Question

我想通过html文件输入动态加载react js组件。从本质上讲，我希望达到与完成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>
        )
    }
}

使用输入动态加载和渲染反应组件[type = file]

1 个答案: