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>
    }
    listHide() {
      console.log('5555')
      const { list } = this.props
      let firstLineNum = 0;   //第一行字数
      let secondLineNum = 0;      //第二行字数
     return list.map((item, index) => {
        console.log('44444444',firstLineNum,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)
        // }
      });

    }

    render() {
      const { title,list, changeFlag } = this.props
      const { showAll } = this.state
      // console.log('1111',list)
      // const listAll = list.map(item => {
      //   console.log('22222',item)
      //    return <span> item</span>
      //    {/* this.renderItem(item) */}
      // });
      

      return   (
          <ul>
            <li className={style["firstLi"]}>
              <div className={style["title"]}>{title}：</div>
              <div className={style["content"]}>
                {list.length === 0
                  ?<span >无</span>
                  : showAll
                  ? this.listHide()
                  : this.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>
          </ul>
        )
    }
}

export default RecommendInspect;