Question

我有一个组件，我想使用onClick属性来监听其click事件。简单的东西。但是，当我单击该组件时，单击事件不会触发。

我的组件结构如下（我使用样式化的组件，但这不应该相关）：

// this comes from my UI library

const Icon = styled.div`
  /* some css properties */ 
`

const Search = () => (
  <Icon>
    /* this is an svg imported from the react-icons library */
    <MdSearch />
  </Icon>
)


// this is where I use the stuff from my UI library

class SomeComponent extends Component {
  handleClick = () => {
    // do something
  }

  render() {
    return (
      <div>
        /* some other stuff */
        <Search onClick={this.handleClick} />
      </div>
    )
  }
}

仅当我在搜索组件中展开道具时才检测到点击，如下所示：

const Search = (props) => (
  <Icon {...props}>
    /* this is an svg imported from the react-icons library */
    <MdSearch />
  </Icon>
)

但是，我对这种行为完全感到困惑。为什么我不仅可以直接单击任何组件？但是必须手动将onClick属性向下传递到下一个DOM元素？如果真是那样，还有比散布道具更优雅的解决方案吗？因为那样会弄乱我的整个UI库...：-）

Answer 1

以这种方式需要{...props}：

<Icon {...props}>
    /* this is an svg imported from the react-icons library */
    <MdSearch />
</Icon>

，这样您传递给Search的道具（即onClick={this.handleClick}）实际上就可以传递并附加到（功能）组件内部的组件上。如果没有...props，这些道具会被传入，但实际上并没有“附加”到任何东西，也没有被使用。

不使用上面所示的散布运算符大致等同于创建以下函数：

foo(x) { return 1 }

，想知道为什么x的不同值不会影响foo的行为/结果。

希望能澄清和帮助您的希望：-）

未检测到反应点击

1 个答案: