react-app-shell/activity/src/views/feedback-report/translate/index.js

react打包脚本和example, 这里的版本请忽略

// 功能方法>>>引用:
import React, { Component } from 'react';

// 公用方法 配置项 接口 枚举>>>引用:
import { DocumentTitle } from '../../../components'; // title组件
import { feedbackService } from '../../../service';
import { message } from '../../../utils';

// 组件 公用组件>>>引用:
import { ServiceError } from '../../common';

// 样式>>>引用:
import styles from './translate.less';

/**
 * 有道翻译页面
 * */
export default class Translate extends Component {
  constructor(props) {
    super(props);
    const id = this.props.match.params.id;
    this.state = {
      id,
      chinese: '',
      english: '',
      serviceError: false
    };
  }

  componentDidMount() {
    this.getPageLanguage();
  }

  /**
   * 根据id值获取页面数据
   */
  getPageLanguage = () => {
    const { id } = this.state;
    feedbackService
      .getReportTranslate(id)
      .then((data) => {
        this.setState({
          serviceError: false,
          chinese: data.chinese,
          english: data.english
        });
      })
      .catch(({ code, msg }) => {
        message.error(msg || '发生错误!');
        this.setState({
          serviceError: true
        });
      });
  };

  render() {
    const { serviceError } = this.state;
    // 获取信息时发生异常, 阻塞掉代码不往下走了
    if (serviceError) {
      return <ServiceError></ServiceError>;
    }

    const { chinese, english } = this.state;
    return (
      <div className={styles.translate}>
        <div className={styles.content}>
          <div className={styles.header}></div>
          {chinese ? (
            <div className={styles.substance_1}>{chinese}</div>
          ) : (
            <div className={styles.substance_error}>中文翻译失败，请稍后重试</div>
          )}
          {english ? (
            <div className={styles.substance_2}>{english}</div>
          ) : (
            <div className={styles.substance_error}>语音转换失败，请稍后重试</div>
          )}
          <div className={styles.bottom}>
            <span className={styles.icon}></span>
            <span className={styles.font}>此翻译为有道翻译提供技术支持</span>
          </div>
        </div>
        <DocumentTitle title="魔力耳朵课后反馈报告" />
      </div>
    );
  }
}