containers 文件夹下-优快云博客

本文介绍了一个使用React构建的应用程序结构，并通过具体组件展示了实际应用案例，包括404页面、根组件、首页菜单栏等。这些示例涵盖了React的基本用法，如组件定义、状态管理及路由配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

404.js

import React, { Component } from 'react'
import { Link } from 'react-router'
import MyIcon from '../components/MyIcon';
export default class Tour extends Component {
  render() {
    return (
      <div className="center-center-column" style={{height: '100vh'}}>
        <div><MyIcon type="icon-lab-404" style={{marginBottom:".2rem",color:"#cdcdcd"}} size="2rem"/> </div>
        <span className="font-30">页面没有找到 </span>
        <Link to="/" className="font-36 main-color mt20">返回首页  </Link>
      </div>
    )
  }
}

App.js

import React,{ Component } from 'react';
export default class App extends Component {
  render() {
    const { children } =this.props;
    return children
  }
}

index.js

export {default as App} from './App'
// 404
export { default as NotFoundPage } from './404.js'

export { default as HomeTabBar } from './HomeTabBar';

export { default as PersonalCenter } from './PersonalCenter';

export { default as Myinformation } from './PersonalCenter/myinformation.js'; 

export { default as Infomationedit } from './PersonalCenter/infomationedit.js';  

export { default as UpdataPassword } from './PersonalCenter/updataPassword.js';   

export { default as AddPlanList } from './MakePlan/AddPlanList';

export { default as AddPlan } from './MakePlan/AddPlan';

export { default as DoctorDetails } from './DoctorDetails';

export { default as RecommendProducts } from './DoctorDetails/recommendProducts.js';

export { default as RecordDetails } from './DoctorDetails/recordDetails.js';

export { default as VisitingRecord } from './DoctorDetails/visitingRecord.js'; 

export { default as Remarks } from './DoctorDetails/remarks.js'; 

export { default as Testlogin } from './Login/testlogin.js';

export { default as Getcode } from './Login/getcode.js';

export { default as SalesInquiries } from './SalesInquiries'; 

export { default as Product } from './Product'; 

export {AddMeeting, MeetingBudget, MeetingMinutes, MeetingSign, MeetingCost, MeetingDetails} from './Meeting'

Root.js

import React, { Component } from 'react'
import routes from '../routes'
import { Router } from 'react-router'
import '../../styles/index.less'
import '../../styles/normalize.less'


export default class Root extends Component {
  render() {
    const { history } = this.props;
    return (
      <Router history={history} routes={routes} />
    )
  }
}

HomeTabBar文件夹下index.js

/*首页的菜单栏*/
import React, { Component } from 'react'
import { TabBar } from 'antd-mobile';

import PersonalCenter from '../PersonalCenter'      /*个人中心*/
import MakePlan from '../MakePlan'                  /*做计划*/
import Product from '../Product'                    /* 产品列表  */


/*<img src={require("../../../images/tabBar/tabbar-1.png")} width='.64rem' height='.64rem' />*/
class HomeTabBar extends React.Component{
    state = {

    }
    componentDidMount(){
        const {selectedTab="four"} = this.props;
        this.setState({selectedTab});
    }
    render(){
        const {selectedTab} = this.state;
        return (
            <TabBar  unselectedTintColor="#949494" tintColor="#090" barTintColor="white" >
                <TabBar.Item
                    title="客户"
                    key="客户"
                    selected={selectedTab === 'one'}
                    onPress={() => {this.setState({selectedTab: 'one'})}}
                    icon={<img src={require("../../../images/tabBar/tabbar-1.png")} style={{width: '0.5rem',height: '0.5rem'}} />}
                    selectedIcon={<img src={require("../../../images/tabBar/tabbar-on-1.png")} style={{width: '0.5rem',height: '0.5rem'}} />}
                >       
                    {<MakePlan />}             
                </TabBar.Item>
                <TabBar.Item
                    title="会议"
                    key="会议"
                    selected={selectedTab === 'two'}
                    onPress={() => {this.setState({selectedTab: 'two'})}}
                    icon={<img src={require("../../../images/tabBar/tabbar-2.png")} style={{width: '0.5rem',height: '0.5rem'}} />}
                    selectedIcon={<img src={require("../../../images/tabBar/tabbar-on-2.png")} style={{width: '0.5rem',height: '0.5rem'}} />}
                >                    
                </TabBar.Item>
                <TabBar.Item
                    title="产品"
                    key="产品"
                    selected={selectedTab === 'three'}
                    onPress={() => {this.setState({selectedTab: 'three'})}}
                    icon={<img src={require("../../../images/tabBar/tabbar-3.png")} style={{width: '0.5rem',height: '0.5rem'}} />}
                    selectedIcon={<img src={require("../../../images/tabBar/tabbar-on-3.png")} style={{width: '0.5rem',height: '0.5rem'}} />}
                >    
                    {<Product/>}            
                </TabBar.Item>
                <TabBar.Item
                    title="我的"
                    key="我的"
                    selected={selectedTab ==='four'}
                    onPress={() => {this.setState({selectedTab: 'four'})}}
                    icon={<img src={require("../../../images/tabBar/tabbar-4.png")} style={{width: '0.5rem',height: '0.5rem'}} />}
                    selectedIcon={<img src={require("../../../images/tabBar/tabbar-on-4.png")} style={{width: '0.5rem',height: '0.5rem'}} />}
                >
                    {<PersonalCenter />}   
                </TabBar.Item>
            </TabBar>
        )
    }
}
export default HomeTabBar;