我在我的 react/angular 项目中使用 cloud 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>
);
}
});
索引.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>）。
控制台说需要没有定义。
也许我应该导入 Boostrap、Angular、React 以及我使用的所有内容，以便进行 react-inline-edit 工作？文件或告诉我哪里出错了？