美文网首页
封装子组件onClick注意点

封装子组件onClick注意点

作者: iamwangkj | 来源:发表于2019-03-20 11:52 被阅读0次

    封装子组件时,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注意点

          本文链接:https://www.haomeiwen.com/subject/lnlzmqtx.html