两种形式的组件如何传参数

两种形式的组件指的是：

1. const Share = () => ()

const Share = ({display,clickShare}) => ()

2. class Share extends Component {}

class Share extends Component {
  render(){
    const {clickShare} = this.props
    return(
      <div onClick={clickShare}>取消</div>
    )
}

具体代码如下：

一、

组件CheckCircleIcon中传了两个参数{display,clickShare}

import React from 'react'
import '../../css/Icons.css'

const ShareIcon = ({display,clickShare}) => (
  <svg width="14px" height="16px" className='shareIcon' display={display ? 'inline' : 'none'} onClick={clickShare}>
    <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
        <g id="8.一门课程总体页（点击首页-所属课程图片）" transform="translate(-286.000000, -17.000000)" fill="#FFFFFF">
            <g id="nav" transform="translate(0.000000, 10.000000)">
                <path d="M297.666667,18.3092369 C297.075556,18.3092369 296.546667,18.5502008 296.142222,18.9277108 L290.596667,15.5943775 C290.635556,15.4096386 290.666667,15.2248996 290.666667,15.0321285 C290.666667,14.8393574 290.635556,14.6546185 290.596667,14.4698795 L296.08,11.1686747 C296.5,11.5702811 297.052222,11.8192771 297.666667,11.8192771 C298.957778,11.8192771 300,10.7429719 300,9.40963855 C300,8.07630522 298.957778,7 297.666667,7 C296.375556,7 295.333333,8.07630522 295.333333,9.40963855 C295.333333,9.60240964 295.364444,9.78714859 295.403333,9.97188755 L289.92,13.2730924 C289.5,12.8714859 288.947778,12.62249 288.333333,12.62249 C287.042222,12.62249 286,13.6987952 286,15.0321285 C286,16.3654618 287.042222,17.4417671 288.333333,17.4417671 C288.947778,17.4417671 289.5,17.1927711 289.92,16.7911647 L295.457778,20.1325301 C295.418889,20.3012048 295.395556,20.4779116 295.395556,20.6546185 C295.395556,21.9477912 296.414444,23 297.666667,23 C298.918889,23 299.937778,21.9477912 299.937778,20.6546185 C299.937778,19.3614458 298.918889,18.3092369 297.666667,18.3092369 L297.666667,18.3092369 Z" id="Shape"></path>
            </g>
        </g>
    </g>
</svg>
)

export default ShareIcon

下面是HeadBar组件接收参数并赋值

class HeadBar extends Component {
  render(){
    return(
        <div className='headBarWrap'>
           ...            
            <div className='shareIconWrap'><ShareIcon display={this.props.ShareDisplay} clickShare={this.props.clickShare1}/></div>            
            ...
        </div>
    
    )
  }
}
export default withRouter(HeadBar)

接下来在 Signin组件中正式使用HeadBar，并给HeadBar中的各项参数赋值。

class Signin extends Component {

  render(){
    return(
      <div>
        <HeadBar color='#fff' bgColor="#00bcd4"  ShareDisplay={false} />
      ...
      </div>
    )
  }
}

export default Signin

以上的过程也是跨组件传递值的过程。

二、

Share组件中设置参数
const {closeShareWin} = this.props，
onClick={closeShareWin}

class Share extends Component {
  render(){
    const {closeShareWin} = this.props
    let styles={
      coverLayer:{
        'width':'100%',
        'height':'100vh',
        'backgroundColor':'rgba(104,104,104,.5)',
      }
    }
    return(
      <div className='shareWrap'>
        <div className='sharePopup'>
          <WechatIcon />
          <WechatMomentIcon />
        </div>
        <div className='cancelBtn' onClick={closeShareWin}>取消</div>
      </div>
    )
  }
}
export default Share

CourseDetail 中使用closeShareWin，赋值点击事件

class CourseDetail extends Component{
  render(){
      return(
          <div style={styles.sharePop} > <Share closeShareWin={this.closeShareWin}/></div>
      ）
    }
}
export default CourseDetail