react笔记之context跨层级传递数据

责编:menVScode 2017-07-09 20:58 阅读(949)

        用props在组件中传递数据,只能逐级的往下传递,不能跨组件式的进行传递,而context可以跨组件的传递这些数据。

        用个例子来说明如何使用context

src-app.js

import React,{Component} from 'react';
import ReactDom from 'react-dom';
import Nav from 'nav/Nav.js';
import CardWrap from 'cardWrap/CardWrap.js';
import Card from 'card/Card.js';
import PropTypes from 'prop-types';
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{
	//定义好要传递的数据
	getChildContext(){
		return{
			nick:'menvscode'
		}
	}
	render(){
		let data=this.props.data;
		return(
			<div className='ui container'>
				<div className='ui dividing'></div>
				<Nav />
				<CardWrap data={data} />
			</div>
		)
	}
}
//验证数据
App.childContextTypes = {
	nick:PropTypes.string
}
ReactDom.render(
	<App data={data} />,
	document.getElementById('root')
);

components-card-Card.js

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

let propTypes = {
	imgSrc:PropTypes.string,
	name:PropTypes.string.isRequired,//isRequired代表一定要有值传进来
	meta:PropTypes.string,
	desc:PropTypes.string,
	joined:PropTypes.number,
	likeNum:PropTypes.number
}

let contextTypes = {
	nick:PropTypes.string
}
export default class Card extends Component{
	render(){
		//获取定义好的跨组件数据
		let {nick} = this.context;
		//console.log(nick)

		let {imgSrc,name,meta,desc,joined,likeNum} = this.props;
		return(
			<div className='ui card'>
				<div className='image'>
					<img src={imgSrc} />
				</div>
				<div className='content'>
					<div className='header'>{name}</div>
					<div className='meta'>
						<a href=''>{meta}</a>
					</div>
					<div className='description'>{desc}</div>
				</div>
				<div className='extra content'>
					<span className='right floated'>{nick} in {joined}</span>
					<span>
						<i className='empty heart icon'></i>{`${likeNum}  Like`}
					</span>
				</div>
			</div>
		)
	}
}
//挂载到组件上
Card.propTypes=propTypes;
Card.contextTypes=contextTypes;

        简单说明:首先在App.js中定义好要跨组件的数据(nick),对齐进行数据验证。然后在Card.js中通过this.context来过去数据,也要对其进行验证,这样Card.js

就能跨过CardWrap组件获取到数据了。


        在使用context前,给出一个警告使用context会破坏组件的封装性,让组件变得难以复用,而且让组件的数据流向变得不那么清晰。

        那什么时候使用context呢?官网:https://facebook.github.io/react/docs/context.html,上面有这么一句话:

        If you aren't familiar with state management libraries like Redux or MobX, don't use context.

        意思说:如果你不熟悉Redux或者MobX,建议就不要用context。        


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

邮箱快速注册

忘记密码