一个react项目案例01 组件部分

最新推荐文章于 2025-05-12 22:19:34 发布

原创

最新推荐文章于 2025-05-12 22:19:34 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了一个React应用中的多个核心UI组件，包括用户头像选择器、Logo展示、底部导航栏、页面未找到提示及用户列表展示等。通过具体实例代码展示了各组件的功能实现方式。

文章目录

1.入口js
组件部分

参考
https://www.bilibili.com/video/BV17b411V7WG?from=search&seid=3866280229006180398
主要的代码

1.入口js

/*
入口JS
 */
import React from 'react'
import ReactDOM from 'react-dom'
import {
   
   HashRouter, Switch, Route} from 'react-router-dom'
import {
   
   Provider} from 'react-redux'

import store from './redux/store'
import Rigister from './containers/register/register'
import Login from './containers/login/login'
import Main from './containers/main/main'

import './assets/css/index.less'

// import './test/socketio_test'

ReactDOM.render((
  <Provider store={
   
   store}>
    <HashRouter>
      <Switch>
        <Route path="/register" component={
   
   Rigister}/>
        <Route path="/login" component={
   
   Login}/>
        <Route component={
   
   Main}></Route> 默认路由
      </Switch>
    </HashRouter>
  </Provider>
), document.getElementById('root'))

组件部分

2.用户头像组件

在这里插入图片描述

/*
选择用户头像的UI组件
 */

import React, {
   
   Component} from 'react'
import {
   
   List, Grid} from 'antd-mobile'
import PropTypes from 'prop-types'

export default class HeaderSelector extends Component {
   
   

  static propTypes = {
   
   
    setHeader: PropTypes.func.isRequired
  }

  state = {
   
   
    icon: null //图片对象, 默认没有值
  }

  constructor(props) {
   
   
    super(props)
    // 准备需要显示的列表数据
    this.headerList = []
    for (let i = 0; i < 20