React JSX:如果其他具有组件属性

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： Unexpec ted 令牌 (20：18( 18 | 20 |如果 (task.complete( {checked = "checked";} else { check = "; |^ 21 | } 22 |onChange={this.props.markTaskComplete 23 |

我已经尝试了来自堆栈溢出的几个链接，但没有帮助。我很抱歉问了太幼稚的问题。

Answer 1

您错过了 的右括号

onChange={this.props.markTaskComplete

Answer 2

Classic if/else 不允许在 return 语句中使用。对此有很多解决方案：

第一：您可以做的是使用以下语法：

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

你可以在这里阅读更多关于这个的信息： 反应条件渲染

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