React JSX：コンポーネントのプロパティでelseがある場合

Question

このコードスニペットは本で見てきましたが、次のコードをコンパイルできません。エラーとしてこれを取得

var TaskItem = React.createClass({ 
    render: function() { 
    var task = this.props.task; 

    return (
     <li> 
     <span>{task.name}</span> 
     <div> 
      <input type="checkbox" 

       if (task.completed) {checked = "checked";} else { checked = ""; 
} 
      onChange={this.props.markTaskComplete 

      <button onClick={this.props.removeTask}>Remove</button> 
     </div> 
     </li> 
    ); 
    } 
}); 

：私はあまりにも素朴な質問をするためにstackoverflowのからいくつかのリンクが、didntのhelp.Myの謝罪を試してみました

Failed to compile. ./src/index.js Syntax error: D:/Users/rajeevakotkar/Documents/node/my-app/src/index.js: Unexpec ted token (20:18) 18 | 20 | if (task.completed) {checked = "checked";} else { checked = ""; |^21 | } 22 | onChange={this.props.markTaskComplete 23 |

。

Answer 1

あなたはtask.completedがちょうどchecked属性に値を割り当てるブールあるので

onChange={this.props.markTaskComplete 

Answer 2

ためのブラケットを閉じ逃しました。

Answer 3

if/elseはreturn文で使用できません。 このためのソリューションがたくさんあります：

まず：あなたはあなたができるより複雑な何かをしたい場合は：セカンド

checked={task.completed ? "checked" : "" } 

：あなたは何ができるか は、次の構文を使用しています

render(){ 
    let checked = ""; 
    if(task.completed){ 
     checked="checked"; 
    } 
    return(... checked={checked}...); 
    } 

ティ：このようにレンダリングさでそれを返す前に、変数を作成し、出力RD：あなたが値を計算するために別の関数を呼び出すことができ：

dosth(){ 
     return task.completed ? "checked" : ""; 
    } 
    render(){ 
     return(... 
      checked={this.dosth()} 
      ...); 
    } 

あなたはここにこの詳細を読むことができます：React Conditional Rendering