Github StackChat

用到的React-Router

React-Router是React路由的解决方案之一,也可以使用别的库

安装

npm install react-router --save-dev

路由配置

react-router主要提供了几个组件来进行路由之间结构的组织

  1. Router 所有路由组件的根
  2. Route 路由组件
  • path属性 匹配路径
  • component属性 匹配路径渲染的组件
  1. IndexRoute 配置默认页面
  • component 渲染的组件
React.render((
<Router history={browserHistory}>
<Route path="/" component={App}>
{/* 当 url 为/时渲染 Dashboard */}
<IndexRoute component={Dashboard} />
<Route path="about" component={About} />
<Route path="inbox" component={Inbox}>
<Route path="messages/:id" component={Message} />
</Route>
</Route>
</Router>
), document.body)

  1. 根据路由的之间的嵌套关系和匹配路径,每个组件里都会有一个children属性来对应路由下的子组件
<div>
this.props.children
<div>
  1. 如果一个路由要同时更新多个组件
component={{component1:xxx,component2:xxx}}

History

React Router 是建立在 history 之上的。一个 history 知道如何去监听浏览器地址栏的变化

import { browserHistory } from 'react-router'

组件生命周期

componentDidMount() //渲染组件
componentWillUnmount() //卸载组件

今日完成

今天在使用React-Router发现比较不适合之前UI的设计,折腾了一会选择放弃Router,直接使用最顶层的State来进行切换渲染组件

render() {
return (
<div>
<LeftNav onChangeLeft={this.changeLeftSidebar} onChangeRight={this.changeRightSidebar}/>
{this.componentMap[this.state.LeftSidebar]}
<ChatBar />
<Sidebar species={this.state.RightSidebar}/>
</div>
)
};

将顶层组件内部的State修改方法传递给子组件通过回调进行修改和直接传递要渲染组件的信息

Node.js实现PC端类微信聊天软件(二)的更多相关文章

  1. Node.js实现PC端类微信聊天软件(四)

    Github StackChat 学习回顾 React和Electron结合 TypeError: fs.existsSync is not a function 在React组件里引入electro ...

  2. Node.js实现PC端类微信聊天软件(一)

    Github StackChat 技术栈 写这个软件StackChat的主要目的是巩固练习Node和对React的实践,也是为了学习东西,所以选用了这些自己还没在项目里使用过的技术,边学变写 Elec ...

  3. Node.js实现PC端类微信聊天软件(五)

    Github StackChat 学习回顾 Socket.io 结合Express创建Socket.io服务器 const app = require('express')() const http ...

  4. Node.js实现PC端类微信聊天软件(三)

    Github StackChat Redux学习回顾 Redux的主要功能就是管理复杂交错的State,比如需要讲state提升到顶层组件的场景中,使用Redux就很合适 Redux主要提供三个东西来 ...

  5. js 判断pc端或手机端

    <script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...

  6. Node.js系列:Buffer类的使用

    客户端JavaScript中没有对二进制数据提供很好的支持.但是在处理TCP流或文件流时,必须要处理二进制数据.Node.js定义了一个Buffer类,用来创建一个专门存放二进制数据的缓存区. Buf ...

  7. Node.js之使用Buffer类处理二进制数据

    Node.js之使用Buffer类处理二进制数据 Buffer类可以在处理TCP流或文件流时处理二进制数据,该类用来创建一个专门存放二进制数据的缓存区. 1. 创建Buffer对象 1.1 直接创建: ...

  8. react网页版聊天|仿微信、微博web版|react+pc端仿微信实例

    一.项目介绍 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs等技术混合开发的仿微信web端聊天室react ...

  9. 基于Node.js+socket.IO创建的Web聊天室

    这段时间进了一个新的项目组,项目是用Appcan来做一个跨平台的移动运维系统,其中前台和后台之间本来是打算用WebSocket来实现的,但写好了示例后发现android不支持WebSocket,大为受 ...

随机推荐

  1. python爬虫 BeautifulSoup

    简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据. Beautiful Soup自动将输入文档转换为Unicode编码,输出文档转换为utf-8编码. Bea ...

  2. TCP 报文段结构

      源端口.目标端口:计算机上的进程要和其他进程通信是要通过计算机端口的,而一个计算机端口某个时刻只能被一个进程占用,所以通过指定源端口和目标端口,就可以知道是哪两个进程需要通信.源端口.目标端口是用 ...

  3. Method of offloading iSCSI TCP/IP processing from a host processing unit, and related iSCSI TCP/IP offload engine

    A method of offloading, from a host data processing unit (205), iSCSI TCP/IP processing of data stre ...

  4. 对XAML进行编辑的辅助类(XamlHelper)

    原文:对XAML进行编辑的辅助类(XamlHelper) // XamlHelper.cs// --------------------------------------------// 对XAML ...

  5. ASP.NET Core 基础教程总结 - ASP.NET Core 基础教程 - 简单教程,简单编程

    原文:ASP.NET Core 基础教程总结 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 基础教程总结 ASP.NET Core 基础教程总算是有了个简单 ...

  6. [Unity3D]Unity3D圣骑士模仿游戏开发传仙灵达到当局岛

    大家好,我是秦培.欢迎关注我的博客.我的博客地址blog.csdn.net/qinyuanpei. 在前面的文章中.我们分别实现了一个自己定义的角色控制器<[Unity3D]Unity3D游戏开 ...

  7. .net core使用ef 6

    需要是core(with full .net framework)的项目,因为core本身不支持ef 6 注意新建的项目是.net framework+.net core的 有空来填坑,参考资料写的很 ...

  8. 拆分Codeigniter 数据库,独立提取

    起因:     codeigniter的activeRecord链式操作非常的方便,目前手头的项目用的不是CI,但是又想使用CI的数据库操作.   1. 新建文件夹 activeDB,内部目录如下 最 ...

  9. qml实现对SSL的支持(使用msys2,同时支持32和64位)超详细 good

    首先准备环境.两种方法,使用mingw64 或者VS 直接放上下载地址https://sourceforge.net/projects/msys2/我下载的是msys2-x86_64-20161025 ...

  10. imp dll时遇见的非常恶心的问题

    我需要导入dll库中这样一个函数VM661JTCPDLL_API int admin_login(sel_admin_ret* sel_admins, int num, char* admin_nam ...