调用React组件的正确方法是什么？

Question

我遇到了反应组件的问题。基本上，我使用与Rails集成的NPM并在我的rails应用程序中调用React组件。

我尝试在我的代码中调用react-file-base64模块，如下所示：

＆＃13;

＆＃13;

const FileBase64 = require('react-file-base64');

var MembersNew = React.createClass(
{
	render()
	{
		return(
			<div>
			<h5>ACCOUNT DETAILS</h5>
			<hr/>
			<p>Fill in your member account details below</p>
			<b>Membership ID : </b>
			<div className="row">
			<div className="medium-6 columns">
            <FileBase64/> <------ Called component
				 <label>Username*
	                <input ref="name" type="text"/>
	             </label>
	             <label>First Name*
	                <input ref="name" type="text"/>
	             </label>
	             <label>Last Name*
	                <input ref="name" type="text"/>
	             </label>
	             <label>Email Address*
	                <input ref="name" type="text"/>
	             </label>
             </div>
       </div>
       )

＆＃13;

＆＃13;

＆＃13;

我收到以下错误：

下面是react-file-base64.js：

＆＃13;

＆＃13;

import React from 'react';
import ReactDOM from 'react-dom';

class FileBase64 extends React.Component {

  constructor() {
    super()
    this.state = {
      files: []
    }
    this.props = {
      multiple: false
    }
  }

  handleChange(e){

    // get the files
    let files = e.target.files;

    // Process each file
    var allFiles = []
    for (var i = 0; i < files.length; i++) {

      let file = files[i]

      // Make new FileReader
      let reader = new FileReader()

      // Convert the file to base64 text
      reader.readAsDataURL(file)

      // on reader load somthing...
      reader.onload = () => {

        // Make a fileInfo Object
        let fileInfo = {
          name: file.name,
          type: file.type,
          size: Math.round(file.size / 1000)+' kB',
          base64: reader.result,
          file: file
        }

        // Push it to the state
        allFiles.push(fileInfo)

        // If all files have been proceed
        if(allFiles.length == files.length){
          // Apply Callback function
          if(this.props.multiple) this.props.onDone(allFiles)
          else this.props.onDone(allFiles[0])
        }

      } // reader.onload

    } // for

  }

  render(){
    return (
      <div>
      <input
        type="file"
        onChange={ this.handleChange.bind(this) }
        multiple={ this.props.multiple } />
      </div>
    )
  }

}

export default FileBase64;

＆＃13;

＆＃13;

＆＃13;

我认为我所做的是错的。如果有人可以指导我如何实现这一目标。我真的很感激。