相关疑难解决方法(0)

我正在使用我的React app运行lint,我收到此错误:

error    JSX props should not use arrow functions        react/jsx-no-bind

这就是我正在运行箭头功能(内部onClick)的地方:

{this.state.photos.map(tile => (
  <span key={tile.img}>
    <Checkbox
      defaultChecked={tile.checked}
      onCheck={() => this.selectPicture(tile)}
      style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}}
    />
    <GridTile
      title={tile.title}
      subtitle={<span>by <b>{tile.author}</b></span>}
      actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>}
    >
      <img onClick={() => this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/>
    </GridTile>
  </span>
))}

这是一个应该避免的不良做法吗？什么是最好的方法呢？

我对Reactjs非常陌生，并且td在我的render方法中有一个：

<td style={{cursor: 'pointer'}} onClick={} key={i}>

单击此按钮后td，我想更改其样式，如何在react js中执行此操作？

谢谢。

编辑：

这是我通过td以下方式生成的：

{this.props.posts.map((service, i) =>
     <tr>
        <td style={{cursor: 'pointer'}} key={i}>
           <span> {posts.createdBy} </span>
        </td>
     </tr>
)}

在 jQuery 中，当一个事件在 html元素。

例如：

$(".dropdown-trigger").on("click", function(event) {
  var self = this;
  $("html").one("click", function() {
    $(self).parents(".dropdown").removeClass("active");
  });
  $(this).parents(".dropdown").toggleClass("active");

  event.stopPropagation();
});

在 React 中，这并不容易。

当单击 html 元素时，如何在 React 中执行一个操作，并且只执行一次该操作（类似于我的 jQuery 代码）？