我是反应的新手。我的应用程序运行正常,但在添加 eslint(airbnb) 后,我的应用程序无法编译。
export default class HelloWorldComponent extends React.Component {
render() {
return (
<div>
<div>{this.props.message}</div>
<button onClick={this.props.helloWorldClick}>Hello
World</button>
</div>
)
}
helloWorldClick = () => {
console.log('here')
}
}
Run Code Online (Sandbox Code Playgroud)
在 .eslintrc 文件上添加 { "parser": "babel-eslint" } 之前,它抛出了 eslint 错误
“[eslint] 解析错误:意外的令牌 =”——在 helloWorldClick 箭头函数行上。
添加解析器后,我没有任何 elsint 错误。但是运行该应用程序时出现编译错误。
编译失败 ./src/component/HelloWorldComponent.js Line 18: 'helloWorldClick' is not defined no-undef
请让我知道如何解决此错误。
在我的 angular2 组件中,我列出了数据,我想使用 booststrap 类(col-md-4)将这些数据显示到 3 列中。
例如,我有如下所示的 json 对象。
{
"menuList":[
{"id":1,"sn":"nd","name":"Noodles"},
{"id":2,"sn":"sd","name":"Salad"},
{"id":3,"sn":"sp","name":"Soup"},
{"id":4,"sn":"fb","name":"Fresh Bowl"},
{"id":5,"sn":"sn","name":"Snacks"},
{"id":6,"sn":"pz","name":"Pizza"},
{"id":7,"sd":"nd","name":"Sandwich"}
]
Run Code Online (Sandbox Code Playgroud)
}
我想将名称显示为 3 列。
面条 沙拉 汤 新鲜碗 小吃 三明治
这是我尝试过的代码。
<div *ngFor="let menu of menuList; #i=index" *ngIf="i % 3 == 0" class="row">
<div class="col-md-4">{{menu[$i].name}}</div>
<div class="col-md-4">{{menu[$i + 1].name}}</div>
<div class="col-md-4">{{menu[$i + 2].name}}</div>
Run Code Online (Sandbox Code Playgroud)
但它显示错误,因为首先我不能在同一元素中使用 ngFor 和 ngIf 。
请给我一个解决方案。
通过单击按钮它加载了一个bootstrap模式.在模态上有一个表单和单击保存按钮我试图通过ajax调用提交表单.第一次ajax调用触发一次,但第二次ajax url触发两次.我在firebug控制台部分看到post url被多次调用.
这是我的jquery代码.
$(".show-modal").click(function() {
$('.upload-modal').modal();
$(".save-logo").click(function(e) {
e.preventDefault();
$.ajax({
type : "POST",
data : data,
contentType: false,
cache : false,
processData: false,
url : "../../io/upload/"
}).done(function(rawData) {
$('.modal-header .close').click();
})
});
})
Run Code Online (Sandbox Code Playgroud)