好客租房移动web项目（1）

其他 2020-02-08 16:25:31 阅读次数: 0

评论组件案例 

组件通讯-非父子

组件通讯-父到子

组件通讯-评论案例

组件通讯-子到父

1、router-demo

react-router基础组件介绍

1.1、components

（1）Home.jsx

import React from 'react'
export default class Home extends React.Component {
  render() {
    return <div>这是Home组件</div>
  }
}

（2）Login.jsx

import React from 'react'
export default class Login extends React.Component {
  render() {
    return <div>这是Login组件</div>
  }
}

（3）User.jsx

import React from 'react'
export default class User extends React.Component {
  render() {
    return <div>这是User组件</div>
  }
}

1.2、App.css

.now {
  font-size: 24px;
  color: red;
}

1.3、App.jsx

import React from 'react'
import './App.css'
import Home from './components/Home'
import Login from './components/Login'
import User from './components/User'
// react-router-dom这个包，给我们声明了很多的组件
// 我们可以直接导入这些组件去使用，就可以完成我们想要的路由相关的功能

// 1. 路由容器相关的组件：  HashRouter: 有#号，锚点实现   BrowserRouter：没有#号，<h5></h5>
// 2. 路由连接  Link  NavLink
// Link: to属性，表示的点击这个Link，跳转到的路由， Link最终渲染成a标签
// NavLink: 作用和Link是一样的，路由跳转  NavLink比Link更强大的一点是可以指定样式

// 3. 路由匹配  Route: 一条路由规则  Switch: 保证同时只会匹配一条路由规则
// Route表示一条路由规则，同时也表示路由的出口（匹配的组件在哪儿显示）
// Switch组件，可以保证只会匹配到一个路由， Swicth中只能出现Route
import {
  BrowserRouter,
  NavLink,
  Route,
  Switch,
  Redirect
} from 'react-router-dom'

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <div>我是一个根组件</div>
          <ul>
            <li>
              <NavLink activeClassName="now" to="/home">
                首页
              </NavLink>
            </li>
            <li>
              <NavLink activeClassName="now" to="/users">
                用户管理
              </NavLink>
            </li>
            <li>
              <NavLink activeClassName="now" to="/login">
                登录
              </NavLink>
            </li>
          </ul>

          <Switch>
            {/* path="/" 只要是/xxx的路由都匹配上exact表示精确匹配 */}
            {/* Redirect: 表示路由的重定向 */}
            <Redirect exact from="/" to="/home" />
            <Route path="/home" component={Home} />
            <Route path="/users" component={User} />
            <Route path="/login" component={Login} />
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}

export default App

1.4、index.js

import React from 'react'
import ReactDOM from 'react-dom'
// 如果App根组件
import App from './App'

// 渲染根组件到页面
ReactDOM.render(<App />, document.getElementById('root'))

2、react-router获取路由参数

2.1、components

（1）News.jsx

import React from 'react'
export default class News extends React.Component {
  // 通过props.match就可以获取到路由的参数
  render() {
    let { match } = this.props
    console.log(match)
    // 获取到路由的参数  /news/1  /news/2
    return <div>这是News组件</div>
  }
}

2.2、App.css

.now {
  font-size: 24px;
  color: red;
}

2.3、App.jsx

import React from 'react'
import './App.css'
import News from './components/News'
// react-router-dom这个包，给我们声明了很多的组件
// 我们可以直接导入这些组件去使用，就可以完成我们想要的路由相关的功能

// 1. 路由容器相关的组件：  HashRouter: 有#号，锚点实现   BrowserRouter：没有#号，<h5></h5>
// 2. 路由连接  Link  NavLink
// Link: to属性，表示的点击这个Link，跳转到的路由， Link最终渲染成a标签
// NavLink: 作用和Link是一样的，路由跳转  NavLink比Link更强大的一点是可以指定样式

// 3. 路由匹配  Route: 一条路由规则  Switch: 保证同时只会匹配一条路由规则
// Route表示一条路由规则，同时也表示路由的出口（匹配的组件在哪儿显示）
// Switch组件，可以保证只会匹配到一个路由， Swicth中只能出现Route
import { HashRouter, Link, Switch, Route } from 'react-router-dom'

class App extends React.Component {
  render() {
    return (
      <HashRouter>
        <div>
          <div>我是一个根组件</div>
          <ul>
            <li>
              <Link to="/news/1">新闻1</Link>
            </li>
            <li>
              <Link to="/news/2">新闻2</Link>
            </li>
            <li>
              <Link to="/news/3">新闻3</Link>
            </li>
          </ul>

          <Switch>
            {/* 
              路由参数：   /news/:id   表示匹配 /news/xx  /news/a /news/b
              */}
            {/* <Route path="/news/:aa" component={News} /> */}

            {/* /news/xxx/xxx */}
            {/* http://localhost:3000/#/news/hello/3 */}
            <Route path="/news/:type/:id" component={News} />
          </Switch>
        </div>
      </HashRouter>
    )
  }
}

export default App

2.4、index.js

import React from 'react'
import ReactDOM from 'react-dom'
// 如果App根组件
import App from './App'

// 渲染根组件到页面
ReactDOM.render(<App />, document.getElementById('root'))

3、react-router编程式导航

3.1、components

（1）Home.jsx

import React from 'react'
export default class Home extends React.Component {
  render() {
    return <div>这是Home组件</div>
  }
}

（2）Login.jsx

import React from 'react'
// 如果想要通过js来实现react中路由的跳转
// 1. 导入withRouter方法
// 2. 使用withRouter包裹住当前组件
// 3. withRouter把当前组件包裹后，在当前组件的props中就能够获取history对象
// ，通过history对象就可以实现路由的额跳转
import { withRouter } from 'react-router-dom'
class Login extends React.Component {
  render() {
    console.log(this.props.history)
    // history对象
    let { history } = this.props
    return (
      <div>
        {/* 需求：点击登录的时候，跳转到首页组件去 */}
        {/* 编程式导航：通过js来显现路由的跳转 */}
        这是Login组件{' '}
        <button onClick={() => history.push('/home')}>点击登录</button>
      </div>
    )
  }
}

export default withRouter(Login)

（3）User.jsx

import React from 'react'
export default class User extends React.Component {
  render() {
    return <div>这是User组件</div>
  }
}

3.2、App.css

.now {
  font-size: 24px;
  color: red;
}

3.3、App.jsx

import React from 'react'
import './App.css'
import Home from './components/Home'
import Login from './components/Login'
import User from './components/User'

// 声明式导航： 通过Link或者NavLink实现导航的跳转
// 编程式导航： 通过js代码来实现路由的跳转  router.push()
import { BrowserRouter, Link, Route, Switch, Redirect } from 'react-router-dom'

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          {/*  <ul>
            <li>
              <Link to="/home" component={Home}>
                首页
              </Link>
            </li>
            <li>
              <Link to="/user" component={User}>
                用户
              </Link>
            </li>
            <li>
              <Link to="/Login" component={Login}>
                登录
              </Link>
            </li>
          </ul> */}
          {/* Redirect: 表示路由的重定向 */}
          <Switch>
            <Redirect exact from="/" to="/home" />
            <Route path="/home" component={Home} />
            <Route path="/user" component={User} />
            <Route path="/login" component={Login} />
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}

export default App

3.4、index.js

import React from 'react'
import ReactDOM from 'react-dom'
// 如果App根组件
import App from './App'

// 渲染根组件到页面
ReactDOM.render(<App />, document.getElementById('root'))

4、好客租房移动web项目（1）

4.1、components

（1）Home.jsx

import React from 'react'
import { Link, Switch, Route } from 'react-router-dom'
export default class Home extends React.Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to="/home/roles">角色列表</Link>
          </li>
          <li>
            <Link to="/home/list">列表管理</Link>
          </li>
          <li>
            <Link to="/home/product">商品管理</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/home/roles" component={Role} />
          <Route path="/home/list" component={List} />
          <Route path="/home/product" component={Product} />
        </Switch>
      </div>
    )
  }
}

function Role() {
  return <div>这是Role组件</div>
}
function List() {
  return <div>这是List组件</div>
}
function Product() {
  return <div>这是Product组件</div>
}

（2）Login.jsx

import React from 'react'
// 如果想要通过js来实现react中路由的跳转
// 1. 导入withRouter方法
// 2. 使用withRouter包裹住当前组件
// 3. withRouter把当前组件包裹后，在当前组件的props中就能够获取history对象
// ，通过history对象就可以实现路由的额跳转
import { withRouter } from 'react-router-dom'
class Login extends React.Component {
  render() {
    console.log(this.props.history)
    // history对象
    let { history } = this.props
    return (
      <div>
        {/* 需求：点击登录的时候，跳转到首页组件去 */}
        {/* 编程式导航：通过js来显现路由的跳转 */}
        这是Login组件{' '}
        <button onClick={() => history.push('/home')}>点击登录</button>
      </div>
    )
  }
}

export default withRouter(Login)

（3）User.jsx

import React from 'react'
export default class User extends React.Component {
  render() {
    // 可以在任意的组件中继续配置路由
    return <div>这是User组件</div>
  }
}

4.2、App.css

.now {
  font-size: 24px;
  color: red;
}

4.3、App.jsx

import React from 'react'
import './App.css'
import Home from './components/Home'
import Login from './components/Login'
import User from './components/User'

// 声明式导航： 通过Link或者NavLink实现导航的跳转
// 编程式导航： 通过js代码来实现路由的跳转  router.push()
import { BrowserRouter, Link, Route, Switch, Redirect } from 'react-router-dom'

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Switch>
            <Redirect exact from="/" to="/home" />
            <Route path="/home" component={Home} />
            <Route path="/user" component={User} />
            <Route path="/login" component={Login} />
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}

export default App

4.4、index.js

import React from 'react'
import ReactDOM from 'react-dom'
// 如果App根组件
import App from './App'

// 渲染根组件到页面
ReactDOM.render(<App />, document.getElementById('root'))

5、好客租房移动web项目（2）

5.1、components

（1）Home.jsx

import React from 'react'
class Home extends React.Component {
  // 点标记语法
  render() {
    return <div>这是Home组件</div>
  }
}

export default Home

（2）Login.css

.login_container {
  height: 100%;
  background-color: #90ee90;
}

.login_title {
  height: 50px;
  line-height: 50px;
  background-color: #21b97a;
  text-align: center;
  color: #fff;
  font-size: 24px;
}

.login_form {
  margin: 20px 10px;
}

（3）Login.jsx

import React from 'react'
// 引入semanticui的组件
import { Form } from 'semantic-ui-react'
// 引入Login.css样式
import './Login.css'
class Login extends React.Component {
  render() {
    return (
      <div className="login_container">
        <div className="login_title">登录</div>
        <div className="login_form">
          {/* Form:表示整个表单组件 */}
          {/* Form.Field：表示表单的一个字段 */}
          <Form action="">
            <Form.Field>
              <Form.Input
                size="big"
                icon="user"
                iconPosition="left"
                placeholder="请输入用户名..."
                name="username"
                autoComplete="off"
              />
            </Form.Field>
            <Form.Field>
              <Form.Input
                size="big"
                icon="lock"
                iconPosition="left"
                placeholder="请输入密码..."
                name="password"
                autoComplete="off"
              />
            </Form.Field>
            <Form.Field>
              <Form.Button fluid positive size="big">
                登录
              </Form.Button>
            </Form.Field>
          </Form>
        </div>
      </div>
    )
  }
}

export default Login

（4）点标记语法的介绍.jsx

import React from 'react'
class Home extends React.Component {
  // 点标记语法
  render() {
    return (
      <Form>
        <Form.Input />
        <Form.Button />
      </Form>
    )
  }
}

class Form extends React.Component {
  render() {
    return (
      <div>
        我是一个form组件
        {this.props.children}
      </div>
    )
  }
  // 可以在组件内部去定义组件
  static Input = () => {
    return <div>Input组件</div>
  }

  static Button = () => {
    return <div>Button组件</div>
  }
}

export default Home

5.2、App.jsx

import React from 'react'
// 导入路由
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from 'react-router-dom'
// 导入组件
import Home from './components/Home'
import Login from './components/Login'

class App extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Redirect exact path="/" to="/login" />
          <Route path="/login" component={Login} />
          <Route path="/home" component={Home} />
        </Switch>
      </Router>
    )
  }
}
export default App

5.3、index.css

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

#root {
  height: 100%;
  width: 100%;
}

5.4、index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import 'semantic-ui-css/semantic.min.css'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))
魔法 • 革
发布了284 篇原创文章 · 获赞 45 · 访问量 10万+
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_31784189/article/details/103356237
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022