item.js

import React from 'react';
import { Button } from 'antd-mobile';
import Icon from 'components/Icon';
import styles from './item.less';

const Index = ({
  id,
  image,
  title,
  like,
  share,
  buttonLable,
  onClickLike,
  onClickShare,
  onClickButton,
  showCnt=true
}) => {
  const showCntStyle={display:showCnt?'flex':'none'}
  const showActionStyle={"flexDirection":showCnt?'row':'row-reverse'}

  return (
    <div className={styles.root}>
      <img src={image} alt="" />
      <div className={styles.right}>
        <div className={styles.title}>{title}</div>
        <div className={styles.action} style={showActionStyle}>
          <div className={styles.like} style={showCntStyle}>
            <Icon
              onClick={() => onClickLike(id)}
              size="xxs"
              color={`${like === 1 ? '#ff7b7b' : '#cccccc'}`}
              type={require('public/images/like.svg')}
            />
            <div className={styles.label}>收藏</div>
          </div>
          <div className={styles.share} style={showCntStyle}>
            <Icon
              onClick={() => onClickShare(id)}
              size="xxs"
              color={`${share === 1 ? '#ff7b7b' : '#cccccc'}`}
              type={require('public/images/share.svg')}
            />
            <div className={styles.label}>分享</div>
          </div>
          <Button type="primary" onClick={() => onClickButton(id)}>
            {buttonLable}
          </Button>
        </div>
      </div>
    </div>
  );
};

export default Index;