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を利用することができます。また、私はあなたが重要な構文の

のいくつかの明確な基本はまた明確にリアクトあなたを取得する基本的な反応のチュートリアルのいくつかに行くを持っていない推薦するエラーが何であるかがわかります。そのエラーを検索するだけで、簡単に問題を見つけることができます。また、エラーの正確な場所を確認してから、適切な方法でデバッグする必要があります。これが役立ち、残りのエラーを自分でデバッグできることを願っています。

あなたはreturnブロック内if文をやっているためです。この方法

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

それを実行してください。次のような形式を試してください：

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