封装子组件onClick注重点

2019年8月31日 107次阅读 来源: iamwangkj

封装子组件时，onClick属性的定义注重点：

看法1：有2个父组件，第一个传了onClick，第二个不传，点击第二个时，执行了第一个的onClick（这个是毛病的）

// 子组件
import React from 'react'
const Demo = (props) => {
  const { onClick } = props
  return (
    <div onClick={onClick} style={{
      border: '2px solid red'
    }}>
      <h4>I am title</h4>
      <div>I am content</div>
    </div>
  )
}
export default Demo
// 父组件
<Button onClick={() => {
  console.log('1')
}}></Button>
<Button></Button>

实际上，不传onClick，点击就无效，如图:《封装子组件onClick注重点》

    原文作者：iamwangkj
    原文地址: https://segmentfault.com/a/1190000018584944
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞