[英]Code from example, error: Expected “;” but found “class” and more syntax errors
在 React 新手中,我试图从 Web 中理解示例。 你能告诉我那个代码有什么问题吗?
class MyComponent extends React.component {
constructor() {
this.state = {
counter: 0,
items: [1, 2]
};
}
increase(this) {
this.state.counter++;
}
addItem() {
this.state.items = this.state.items.push(this.state.items.length + 1);
}
render() {
<
div class = ”data” >
<
div > {
this.state.counter
} < /div> <
ul > {
this.state.items.map(item => ( <
li key = {
item
} > element {
item
} < /li>
))
} <
/ul> <
/div> <
div class = ”actions” >
<
button type = ”button” onclick = {
this.increase
} > zwiększ < /button> <
button type = ”button” onclick = {
this.addItem
} > dodaj < /button> <
/div>
}
} ReactDOM.render(<MyComponent>, document.querySelector("body"));
笔记:
查看下面的工作代码片段:
class App extends React.Component { constructor(props) { super(props); this.state = { counter: 0, items: [1, 2] }; } //methods must bind to class increase = () => { //do not directly mutate state, use setState this.setState(state => ({ counter: state.counter + 1 })); }; //methods must bind to class addItem = () => { //do not directly mutate state, use setState this.setState(state => ({ items: [...state.items, state.items.length + 1] })); }; render() { //render must have a return //must return a single outer wrap or use fragment //class is className in react //onclick is onClick in react return ( < React.Fragment > < div className = "data" > < div > { this.state.counter } < /div> < ul > { this.state.items.map(item => ( < li key = { item } > element { item } < /li> )) } < /ul> < / div > < div className = "actions" > < button type = "button" onClick = { this.increase } > zwiększ < /button> < button type = "button" onClick = { this.addItem } > dodaj < /button> < / div > < /React.Fragment> ); } } //don't inject directly into body, create a root div ReactDOM.render( < App / >, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.