根据 ReactJS 中的变量有条件地设置复选框状态

Question

class Example extends React.Component {
  constructor() {
    super();
    this.isChecked = this.isChecked.bind(this);
  }

  isChecked(ex){
    return this.props.defaults && $.inArray(ex, this.props.defaults);
  }

  render() {
    return (
      <div className="example">
        {this.props.items.map(item => (
          var checked = this.isChecked({item.type});

          <span key={item.type}>
            <input type="checkbox" {checked ? 'checked' : ''} name="example" value={item.type} id={item.type} />
            <label htmlFor={item.type}>{item.display}</label>
          </span>
        ))}
      </div>
    );
  }
}

在上面的例子中，我已经向组件传递了一个项目this.props.items列表和一个 defaults 列表this.props.defaults。对于每个项目，如果该项目在默认列表中，我希望它的状态为checked. 保持整体设计不变，我该怎么做？（注意：我意识到我可以重新设计应用程序以避免在地图内声明变量的问题。这不是问题）。

上面的代码不起作用（显然），我只是想让每个人都了解我在这里尝试的内容。如果您运行它，则会在声明“var”的地方出现“意外令牌”之类的错误。

Answer 1

该render方法有一些语法错误，这应该有效：

render() {

  return (
    <div className="example">
      {this.props.items.map((item) => {
        var checked = this.isChecked(item.type);

        return (
          <span key={item.type}>
            <input type="checkbox" checked={checked ? 'checked' : ''} name="example" value={item.type} id={item.type} />
            <label htmlFor={item.type}>{item.display}</label>
          </span>
        )
      })}
    </div>
  );
}

主要错误是在 map 中声明函数，您必须将 item 包裹在括号中，并用括号而不是括号将函数括起来。如果胖箭头函数只有一个语句，则无需指定return. 但是在这种情况下，您添加了该var checked行，因此您现在必须明确地使另一行成为return声明。您checked在输入中的设置方式也存在问题。希望有帮助！