在 ReactJS 中使用内联和映射的语法 error/jshint

Question

这是我的代码，它产生了 "Expected an assignment or function call and instead saw an expression" 错误。我个人没有看到任何错误，我的美化工作照常进行。我相信是 JSHINT 在这里召唤我：

render() {
return (
  <div id="animalGallery">
    {this.props.displayData.map(eachProfilePic => {
      this.state.selected === eachProfilePic.iconID ? (
        <a
          class="animal selected"
          onClick={() => this.profilePicClick(eachProfilePic.iconID)}
        >
          <img src={eachProfilePic.iconID} />
        </a>
      ) : (
        <a
          class="animal"
          onClick={() => this.profilePicClick(eachProfilePic.iconID)}
        >
          <img src={eachProfilePic.iconID} />
        </a>
      );
    })}
  </div>
);}

它在我的代码第四行调用那个错误，它看起来有什么错误吗？如果没有，是否有另一种方法可以在不触发 JSHINT 的情况下编写此代码？

Answer 1

您需要添加 return 或删除 {}（或将其替换为 ()）。当您在 lambda 周围使用 {} 时，它需要一个完整的函数体，而不仅仅是 return.

的表达式

Answer 2

采纳Joseph的回答后的正确代码如下：去掉括号后：

render() {
return (
  <div id="animalGallery">
    {this.props.displayData.map(eachProfilePic =>
      this.state.selected === eachProfilePic.iconID ? (
        <a
          class="animal selected"
          onClick={() => this.profilePicClick(eachProfilePic.iconID)}
        >
          <img src={eachProfilePic.iconID} />
        </a>
      ) : (
        <a
          class="animal"
          onClick={() => this.profilePicClick(eachProfilePic.iconID)}
        >
          <img src={eachProfilePic.iconID} />
        </a>
      )
    )}
  </div>
);
}

否则，我们可以选择添加 return：

render() {
return (
  <div id="animalGallery">
    {this.props.displayData.map(eachProfilePic => {
      return this.state.selected === eachProfilePic.iconID ? (
        <a
          class="animal selected"
          onClick={() => this.profilePicClick(eachProfilePic.iconID)}
        >
          <img src={eachProfilePic.iconID} />
        </a>
      ) : (
        <a
          class="animal"
          onClick={() => this.profilePicClick(eachProfilePic.iconID)}
        >
          <img src={eachProfilePic.iconID} />
        </a>
      );
    })}
  </div>
);
}

在 ReactJS 中使用内联和映射的语法 error/jshint

Syntactical error/jshint with in-line & map in ReactJS

javascript

syntax

jshint

reactjs