如何使html属性的存在动态化？

Question

在下面的代码中，我想使input的“checked”属性动态化。显然，completed是一个布尔值。编译在{check}的开始处失败，错误为TS1005:“...”应为。

import React from 'react';

export class TodoListItem extends React.Component<any, any> {
  render() {
    const {label, completed} = this.props;
    const check = completed? "checked": " ";
    return (
      <li className="todo">
        <label>
          <input type="checkbox"  {check}/> {label}
        </label>
      </li>
    );
  }
}

Answer 1

您可以直接传递checked={completed}，因此如果completed为true，则选中复选框，否则不选中。

import React from 'react';

export class TodoListItem extends React.Component<any, any> {
  render() {
    const {label, completed} = this.props;
    return (
      <li className="todo">
        <label>
          <input type="checkbox"  checked={completed} /> {label}
        </label>
      </li>
    );
  }
}