sourcecode/front/project/www/components/OtherAnswer/index.js

import React, { Component } from 'react';
import './index.less';
import Icon from '../Icon';

export default class OtherAnswer extends Component {
  constructor(props) {
    super(props);
    this.Text = null;
    this.state = { show: false, more: false };
    this.checkHeight();
  }

  checkHeight() {
    if (this.Text != null) {
      if (this.Text.offsetHeight > 80) {
        this.setState({ more: true });
      }
    } else {
      setTimeout(() => {
        this.checkHeight();
      }, 1);
    }
  }

  render() {
    const { show, more } = this.state;
    return (
      <div className={`other-answer ${more ? 'more' : ''} ${!show ? 'hide' : ''}`}>
        <div className="title">Q: Agreement;Rhetorical construction</div>
        <div
          ref={ref => {
            this.Text = ref;
          }}
          className="desc"
        >
          A: They are generally not good at taking care of themselves.and services to prevent worsening health and
          increased health costs.They are worsening health and increased health costs..and services to
        </div>
        {more && show && <Icon name="up" onClick={() => this.setState({ show: false })} />}
        {more && !show && <Icon name="down" onClick={() => this.setState({ show: true })} />}
      </div>
    );
  }
}