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和默认列表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>
  );
}

主要的错误是在地图中声明了这个功能，你必须将项目包装在parens中并用括号代替parens来包围该函数。如果胖箭头函数只有一个语句，则不需要指定return。但在这种情况下，您添加了var checked行，因此您现在必须明确地将另一行设为return语句。如何在输入中设置checked也存在问题。希望有所帮助！

根据ReactJS

1 个答案: