class AppCom extends React.Component{ constructor(props){ super(props); this.state = {} } render(){ return( 
我是App根组件
-----------------
我是插槽内的文字1
我是插槽内的文字2
我是插槽内的文字3
------------------
Header
Main
Footer
 ) } } class SlotCom extends React.Component{ //组件中HTML内容直接全部插入 render(){ console.log(this.props) return( 
 {this.props.children} 
 ) } } class SlotChangeCom extends React.Component{ //组件中HTML内容不同,插入位置不同(注意此处的值也可自定义，均可早props中拿到) render(){ console.log(this.props) let HeaderCom,MainCom,FooterCom; this.props.children.forEach((item,index)=>{ if(item.props['className'] === 'header'){ HeaderCom = item }else if(item.props['className'] === 'main'){ MainCom = item }else{ FooterCom = item } }) return( 
 {HeaderCom} 
 {MainCom} 
 {FooterCom} 
 ) } } 

npm install react-router-dom --save

import React from 'react'; import './index.css'; // import {HashRouter as Router,Link,Route} from 'react-router-dom';//哈希模式 import {BrowserRouter as Router,Link,Route,Redirect,Switch} from 'react-router-dom';//history模式 function One(){ //定义单个组件做演示 return( 
我是ONE
 ) } function Two(){ return( 
我是TWO
 ) } function Three(props){ console.log(props) //接收传递的参数 return( 
我是THREE
 ) } function News(props){ console.log(props.match.params.id)//拿到动态路由传递的参数 return( 
我是动态路由页
 ) } function GoTwo(){ return(  ) } class RouterCom extends React.Component{ constructor(props){ super(props) this.state = { } } render(){ let threeObj = { pathname:'/three', //传入的路径 search:'?id=1',//get请求参数 hash:'#three',//设置Hash值 state:{msg:'hello world'} // 传入组件的数据 } return( 
{/* Router 含有basename属性，表示基础路径 自动加上basename 的值；用其可进行嵌套子路由 */} 
ONETWOTHREENEWSgoTwo
 ) } } export default RouterCom 

import React from 'react'; import ReactDOM from 'react-dom'; import {createStore} from 'redux'; class ComputerCom extends React.Component{ // 创建需要展示数据的组件 render(){ let state = store.getState(); // 通过getState() 方法获取 Store 里的值 return( 
Store里边的数:{state.num}
自加 1自减 1
 ) } } function reducer(state={num:0},action){ //Reducer:是1个函数（初始化数据），通过获取动作，改变数据，生成1个新state。从而改变页面 switch(action.type){ case "add": state.num++ break; case "subtraction": state.num--; break; default: break; } return {...state} // 此处返回相当于 对象的 copy } const store = createStore(reducer); //创建仓库（必须传入reducer） //定义要操作的方法 function add(){ store.dispatch({type:"add"}) //通过仓库的方法dispatch进行修改数据 // store.dispatch({type:"add",content:{id:1,msg:"helloworld"}}) 也可在修改数据时传入参数 } function subtraction(){ store.dispatch({type:"subtraction"}) //通过仓库的方法dispatch进行修改数据 } ReactDOM.render(,document.querySelector("#root")) // 通过store.subsctibe() 方法（必须传入函数） 修改视图（监听数据的变化，重新渲染内容） store.subscribe(()=>{ ReactDOM.render(,document.querySelector("#root")) }) 

import React from 'react'; import ReactDOM from 'react-dom'; import {createStore} from 'redux'; import {connect,Provider} from 'react-redux'; class ComputedCom extends React.Component{ render(){ // 仓库的数据，通过store 的state 传给props ，直接通过props 就可以获取 state的数据 const value = this.props.value; // 将修改数据的方法传入到props中（等同于vuex 的 mapMutation 映射） const clickAdd = this.props.clickAdd; const clickSub = this.props.clickSub; return( 
Store里面的数:{value}
自加1自减1
 ) } } let actionObj = { add:function(state,action){ state.num++; return state }, sub:function(state,action){ state.num = state.num + action.num; // action.num 接收传递的参数 return state } } function reducer(state={num:0},action){ // # Reducer:是1个函数（初始化数据），通过获取动作，改变数据，生成1个新state。从而改变页面 // 如果方法过多，可以把它写在外面 /* switch(action.type){ case "add": state.num++ break; case "sub": state.num--; break; default: break; } */ if(action.type.indexOf('redux') === -1){ //判断数据是否初始化，若无初始化，先初始化 state = actionObj[action.type](state,action); return {...state} //# 状态结构，防止哈希值相同，不进行解析 }else{ return state } } const store = createStore(reducer); // 创建仓库 function mapStateToProps(state){ //# 将数据映射到props（映射函数的形参固定） return{ value:state.num } } // 将修改state 数据的方法，映射到props，默认会将 store.dispatch() 作为参数 function mapDispatchToProps(dispatch){ return{ clickAdd:()=>{dispatch({type:"add"})}, clickSub:()=>{dispatch({type:"sub",num:-1})} //向action 传值 } } // 将数据仓库的state 和 修改state 的方法映射到新的组件上，形成新的组件（让数据、方法、组件形成关联） const App = connect( mapStateToProps, //# 切记数据映射要写在方法映射之前（否则无法拿到数据）
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：vue中关于$emit和$on的使用及说明_vue.js_
                                                                
下一篇：vant中list的使用以及首次加载触发两次解决问题_vue.js_