Question

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

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}，因此如果完成为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>
    );
  }
}

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

1 个答案: