1

反応/角度プロジェクトにクラウド 9 を使用しています。いくつかのパッケージを正常に初期化してインストールしたnpmので、インストールしたいと思いましたreact-inline-edit。
私はそれをしましたが、使用しようとするとimport InlineEdit from 'react-edit-inline'すべてが壊れます。
また、今まで何も要求したりインポートしたりしたことはありません。ここに私の package.json があります:

{
  "name": "my-merge-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel reactSource -d reactDirective -w -s"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.11.4",
    "babel-preset-es2015": "^6.13.2",
    "react-edit-inline": "^1.0.7"
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  },
  "dependencies": {
    "react-edit-inline": "^1.0.7"
  }
}

そして私のconfig.jsファイル：

import InlineEdit from 'react-edit-inline';
var FormattedDate = ReactIntl.FormattedDate;
var DiaryTable = React.createClass({displayName: "DiaryTable",
    getInitialState: function() {
        return {
            items : this.props.item,
            globalChecked:false
        };
    },
    handleAddElement(element) {
        if(this.state.globalChecked)
        {
            element.selected = this.state.globalChecked;
        }
        this.state.items.push(element);
        this.setState(this.state.items);
    },
    handleEditElement(element,index){
        if(this.state.items[index].selected)
        {
            element.selected = this.state.items[index].selected;
        }
        this.state.items[index] = element;
        this.setState(this.state.items);
    },
    handleChecked : function (i) {
        this.state.items[i].selected =  !this.state.items[i].selected;
        this.setState(this.state.items);
    },
    checkAll:function () {
        console.log(this.state.items);
        this.state.globalChecked = !this.state.globalChecked;
        this.setState({globalChecked:this.state.globalChecked});
        var ifChecked = this.state.globalChecked;
        this.state.items = this.state.items.map(function(element) {
            return { start: element.start,end:element.end,hours:element.hours,selected: ifChecked };
        });
        this.setState({items:this.state.items});
    },
    remove : function () {
        for(var i = 0;i<this.state.items.length;i++)
        {
            if(this.state.items[i].selected)
            {
               this.state.items.splice(i,1);
                i--;
            }
        }
        this.setState(this.state.items);
    },
    setResult:function () {
        this.state.items.length = 0;
        if(this.state.globalChecked)
        {
            for(var i=0;i<this.props.result.item.length;i++){
                this.state.items[i] = {start:this.props.result.item[i].start,end:this.props.result.item[i].end,hours:this.props.result.item[i].hours,selected:true};
            }
            this.setState(this.state.items);
        }
        else {
            for(var i=0;i<this.props.result.item.length;i++){
                this.state.items[i] = {start:this.props.result.item[i].start,end:this.props.result.item[i].end,hours:this.props.result.item[i].hours};
            }
            this.setState(this.state.items);
        }
    },
    render: function(){
        var arrayItems =  this.state.items.map(function (item,i) {
            return (
                <tr key={i}>
                    <td><input type="checkbox"  checked={item.selected} onClick={this.handleChecked.bind(this,i)}/></td>
                    <td><FormattedDate value={item.start}/></td>
                    <td><FormattedDate value={item.end}/></td>
                    <td>{Number(item.hours)}</td>
                    <td>
                        <ModalEditElement items={this.state.items} onEditElement={this.handleEditElement} index={i} checked={this.state.globalChecked} ></ModalEditElement>
                    </td>
                </tr>
            );
        }.bind(this));
        return (
            <table className="myTable">
                <thead>
                <tr>
                    <th><input type="checkbox" onClick={this.checkAll}/></th>
                    <th>Start Date:</th>
                    <th>End Date:</th>
                    <th id="hoursField">Hours:</th>
                    <th id="editField">Edit:</th>
                </tr>
                </thead>
                <tbody>
                {arrayItems}
                </tbody>
                <tfoot>
                <tr>
                    <td colSpan="4">
                        <span className="addButtonDisplay"><ModalAddElement onAddElement={this.handleAddElement} items={this.state.items} checked={this.state.globalChecked}></ModalAddElement></span>
                        <button className="myButton" onClick={this.remove}>Remove period</button>
                        <button className="myButton" disabled={this.props.result.item.length === 0} onClick={this.setResult}>Set result from merge</button>
                    </td>
                </tr>
                </tfoot>
            </table>
        );
    }
 });

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="-1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Merging Arrays</title>

    <!--css styles start-->
    <link rel="stylesheet" media="(min-width:1171px)" href="css/styles.css">
    <link rel="stylesheet" media="(max-width:1171px)" href="css/anotherStyle.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/sweetalert.css">
    <link rel="stylesheet" href="css/jquery.base.css">
    <link rel="stylesheet" href="css/jquery.datepick.css">
    <link rel="stylesheet" href="css/redmond.datepick.css">
    <!--css styles end-->

    <!--js resources start-->
    <script src="js/jquery.js"></script>
    <script src="js/react.js"></script>
    <script src="js/angular.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/ngReact.js"></script>
    <script src="js/react-intl.js"></script>
    <script src="js/react-bootstrap.js"></script>
    <script src="js/moment.js"></script>
    <script src="js/sweetalert.min.js"></script>
    <script src="js/jquery.plugin.js"></script>
    <script src="js/jquery.datepick.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/jQueryValidationMethods.js"></script>
    <script src="js/messageValidationOverride.js"></script>
    <script src="reactDirective/diaryComponent.js"></script>
    <script src="js/config.js"></script>
    <!--js resources end-->
</head>

私はそれを私のconfig.jsファイルではなく私のファイルにインポートしようとしていますindex.html(それは正しいですか?)。問題は、外部ファイルなど、これまで私が持っていたものはすべて私のプロジェクトにあり、標準的な方法でリンクしていることです<script src="..."> </script>。
私がフォローしている例では、React から React をインポートしていますが、前述の方法で既にリンクしています ( <script></script>)。

コンソールには、require IS NOT DEFINED と表示されます。

たぶん、React-inline-edit を機能させるために、Boostrap、Angular、React、およびこのインポートのように使用しているすべてのものをインポートする必要がありますか??しかし、それらが既に HTML にリンクされている理由がわかりません..ファイルまたはどこが間違っているのか教えてください。

4

0 に答える 0