newICSS/src/components/PushItems/RecommendInspect/index.jsx

import React, {Component} from 'react';
import style from './index.less'
import showImg from "@common/images/show.png";
import hideImg from "@common/images/close.png";


class RecommendInspect extends Component {
    constructor(props) {
        super(props)
        this.state = {
            showAll: false,
        }
        this.renderItem = this.renderItem.bind(this)
    }
    changeShowFlag() {
      this.setState({
        showAll: !this.state.showAll
      })
    }
    
    renderItem(item) {
      const { changeFlag } = this.props
      return <span>
          <input
            id={item.id + item.name}
            onChange={() =>changeFlag(item)}
            type="checkbox"
            checked={item.checked}
          />
          <label for={item.id + item.name}>{item.name}</label>
      </span>
    }

    render() {
      const { title,list, changeFlag, border } = this.props
      const { showAll } = this.state
      const listAll = list.map(item => {
          return this.renderItem(item)
      });
      let firstLineNum = 0;   //第一行字数
      let secondLineNum = 0;      //第二行字数
      const listHide = list.map((item, index) => {
        firstLineNum = firstLineNum + item.name.length + 2;
        if (firstLineNum > 26) {
          secondLineNum = secondLineNum + item.name.length + 2; 
          if(secondLineNum > 20) {
            return;
          } else {
            return this.renderItem(item)
          }
        } else {

          return this.renderItem(item)
        }
      });

      return   (
            <li className={style["inspectItem"]} style={border ? {"borderBottom": "1px solid #DFDFDF"} : ''}>
              <div className={style["title"]}>{title}：</div>
              <div className={style["content"]}>
                {list.length === 0
                  ?<span >无</span>
                  : showAll
                  ? listAll
                  : listHide}
                {secondLineNum > 21 ? (
                  <span
                    style={{ display: "inline-block" }}
                    className={style["show"]}
                    onClick={this.changeShowFlag.bind(this)}
                  >
                    {showAll ? '收起' : '更多'}
                    <img src={showAll ? hideImg : showImg} />
                  </span>
                ) : (
                  ""
                )}
              </div>
            </li>
        )
    }
}

export default RecommendInspect;