index.js

import React, { Component } from 'react'
import './index.scss'

export default class Experience extends Component {
  render() {
    const { isOnline, tryLearn } = this.props;
    return (
      <div className={'experience_container'}>
        <p className={'title'}>试 / 学 / 体 / 验</p>

        {
          isOnline
          ? (
            <>
              <div className={'experience'}>
                <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/L%402x.png" alt=""/>
                <div>
                  <p>特价试学9块9 体验前3个课时</p>
                  <p>开启颠覆你想象的学习</p>
                </div>
                <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/r%402x.png" alt=""/>
              </div>
              <div className={'btn'} onClick={() => {tryLearn(1)}}>立即体验</div>
            </>
          )
          : (
            <>
              <div className={'experience'}>
                <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/L%402x.png" alt=""/>
                <div>
                  <p>上架后可免费试学</p>
                  <p>体验颠覆你想象的学习</p>
                </div>
                <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/r%402x.png" alt=""/>
              </div>
              <div className={'btn btn--online'}>即将上架敬请期待</div>
            </>
          )
        }

      </div>
    )
  }
}