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>
    );
  }
});

将此视为错误：

编译失败。 ./src/index.js语法错误： D：/Users/rajeevakotkar/Documents/node/my-app/src/index.js：未指明令牌（20:18）18 | 20 |如果（task.completed）{checked =＆＃34; checked＆＃34 ;;} else {checked =＆＃34;＆＃34 ;; | ^ 21 | 22 | onChange = {this.props.markTaskComplete 23 |

我尝试了一些来自stackoverflow的链接，但没有帮助。我抱歉问过于天真的问题。

Answer 1

您错过了

的结束括号

onChange={this.props.markTaskComplete

Answer 2

返回语句中不允许使用Classic if / else。有很多解决方案：

<强>首先：你可以做的是使用以下语法：

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

第二：如果你想做一些更复杂的事情你可以在返回之前创建一个变量并在渲染中输出它，如下所示：

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

第三：您可以调用另一个函数来计算值：

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

您可以在此处详细了解：React Conditional Rendering

Answer 3

由于task.completed是一个布尔值，只需将值赋给checked属性。

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

    return (
      <li>
        <span>{task.name}</span>
        <div>
          <input type="checkbox"
            checked={task.completed} // this line
            onChange={this.props.markTaskComplete}

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

React JSX：if else with component properties

3 个答案: