如果其他導致意外的標記在ES6

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

你在return函數中不能有if-else語句。此外，您還可以使用ternary operators而不是if-else。另外，我會建議你做一些基本的反應教程，這將幫助你清楚地瞭解一些重要的語法

同樣，反應清楚地告訴你錯誤是什麼。只需搜索該錯誤，您就可以輕鬆找到您的問題。你也應該先看看錯誤指向的地方，然後用適當的方法進行調試。希望這有助於你自己調試剩下的錯誤。

做這種方式

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

這是因爲你在做一個return塊內的if聲明。試試這樣的格式：

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