react笔记之组件交流中的事件回调

责编:menVScode 2017-07-16 23:28 阅读(839)

        事件回调是组件交流中很重要的方式,并且推荐这种方式来解决组件之间数据交流的问题。

        做一个例子,原先案例demo的目录结构可查看此篇文章:http://menvscode.com/detail/5960abc841d2a6025bbe0453,在这基础上,在src目录下创建了home文件夹。

src-home-Home.js

import React,{Component} from 'react';

export default class Home extends Component{
	render(){
		return <img src={require('img/128H.jpg')} style={{width:'100%'}} />
	} 
} 

components-nav-nav.js

import React,{Component} from 'react';

class Nav extends Component{
	render(){
		let {changeView} = this.props;
		return(
			<div className='ui menu'>
				<div 
					className='item'
					onClick = {()=>{changeView('home')}}
				>home</div>
				<div 
					className='item'
					onClick = {()=>{changeView('list')}}
				>list</div>
				<div className='item'>about</div>
			</div>
		)
	}
	
}
export default Nav;

src-app.js

import React,{Component} from 'react';
import ReactDom from 'react-dom';
import PropTypes from 'prop-types';

import Nav from 'nav/Nav.js';
import CardWrap from 'cardWrap/CardWrap.js';
import Card from 'card/Card.js';
import Home from 'Home.js';

require('./common/style/main.css');
require('../semantic/dist/semantic.css');//引用的是semantic UI框架

let data = [
	{
		imgSrc:require('img/m00.png'),
		name:'小明',
		meta:'Friends',
		desc:'good boy!!',
		joined:2014,
		likeNum:56
	},
	{
		imgSrc:require('img/m01.png'),
		name:'小刚',
		meta:'Friends',
		desc:'good boy!!',
		joined:2013,
		likeNum:78
	},
	{
		imgSrc:require('img/m02.png'),
		name:'小红',
		meta:'Friends',
		desc:'good girl!!',
		joined:2015,
		likeNum:99
	}
]

class App extends Component{
	constructor(props){
		super(props);
		this.state={
			view:'home'
		}
		this.changeView = this.changeView.bind(this)
	}
	changeView(view){
		this.setState({
			view:view
		})
	}
	//定义好要传递的数据
	getChildContext(){
		return{
			nick:'menvscode'
		}
	}
	render(){
		let data=this.props.data;
		let {view} = this.state;
		let viewComp = null;

		switch(view){
			case 'home':
				viewComp = <Home />
				break;
			case 'list':
				viewComp = <CardWrap data={data} />
				break;	
		}
		return(
			<div className='ui container'>
				<div className='ui dividing'></div>
				<Nav changeView={this.changeView} />
				{viewComp}
			</div>
		)
	}
}

//验证数据
App.childContextTypes = {
	nick:PropTypes.string
}

ReactDom.render(
	<App data={data} />,
	document.getElementById('root')
);

if(module.hot){
	module.hot.accept()
}

案例效果:默认是显示home的页面,然后点击导航 'home'、'list',分别显示其对应的页面。下方截图是 'list' 的页面

QQ截图20170716220909

案列分析:

        1. 在constructor构造器声明状态机,默认'view:home',也就是默认状态显示首页;

        2. 声明changeView函数,并传入一个参数,根据参数来改变view的值,再来改变显示的页面;

        3. 将changeView函数通过属性的方式绑定到导航上,然后传入一个参数。

        4. 在render方法中拿到view的值,再对其进行判断,分别渲染不同的组件;

        


标签: react
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码