Question

我认为我已正确包裹括号，但我仍然收到错误：

Uncaught Error: Parse Error: Line 22: Unexpected token if

if(this.state.isEditing) {
^

Here's a JSFiddle

相关代码

...
renderItem(){
   return (
       if(this.state.isEditing) {
           <input type="text" />
           <button>Save</button>
       } else {
           this.state.items.map((item, i) => 
               <li key={i}>
                   {item}&nbsp;
                   <button>Edit</button>
                   <button onClick={this.dlt_item.bind(this, i)}>Delete</button>
               </li>
           )
       }
   )
},
...

Answer 1

if-else函数中不能包含return语句。您还可以使用ternary operators代替if-else。另外，我建议您先阅读一些基本的反应教程，这些教程将使您了解一些重要的语法

同样React清楚地告诉你错误是什么。只需搜索该错误，您就可以轻松找到问题所在。此外，您应首先尝试查看错误指向的位置，然后使用适当的方法进行调试。希望这会有所帮助，您可以自行调试其余的错误。

这样做

renderItem(){
   var renderIt = null;
   if(this.state.isEditing){
    renderIt =  <div><input type="text" />
                <button>Save</button></div>
   }else{
      renderIt = this.state.items.map((item,i)=> <li key={i}>{item}
   &nbsp;
   <button>Edit</button>
   <button onClick={this.dlt_item.bind(this,i)}>Delete</button>
   </li>
   )
   }
   return (
   <div>{renderIt}</div>


   )
   },

JSFIDDLE

var App = React.createClass({
   getInitialState(){
   return {
     items:[1,2,3],
     isEditing:false
   }
   },
   dlt_item(key){
   var newItems = this.state.items.filter((item,i)=> i !== key)
   this.setState({items:newItems})
   },
   edit_handler(){
   this.setState({isEditing:true})
   },
   isEditing_html(){
    return(
     <div>
     <input type="text" />
     <button>Save</button>
     </div>
     )
   },
   renderItem(){

   return(

      this.state.items.map(function(item,i) {

       var temp = null;
       if(this.state.isEditing){
   temp = this.isEditing_html()
   }else{
   temp = <div><button>Edit</button>
   <button onClick={this.dlt_item.bind(this,i)}>Delete</button></div>
   }
      return (<li key={i}>{item}
   &nbsp;
   {temp}
   </li>

   )
   }.bind(this)
   )
   )
   },
   render(){
      return(
      <ul>
        {this.renderItem()}
      </ul>
      )
   }
})

ReactDOM.render(<App />, document.getElementById('container'));

<强> JSFIDDLE

Answer 2

这是因为您在if块内执行了return语句。尝试这样的格式：

renderItem() {
  if(this.state.isEditing) {
    return (
      <div>Editing</div>
    );
  } else {
    return (
      <div>Default</div>
    );
  }
}

如果else在ES6中导致意外的令牌

2 个答案: