react之使用Context跨组件树传递数据
2017-08-30 14:57
766 查看
react推崇的是单向数据流,自上而下进行数据的传递,但是由下而上或者不在一条数据流上的组件之间的通信就会变的复杂。解决通信问题的方法很多,如果只是父子级关系,父级可以将一个回调函数当作属性传递给子级,子级可以直接调用函数从而和父级通信。
组件层级嵌套到比较深,可以使用上下文getChildContext来传递信息,这样在不需要将函数一层层往下传,任何一层的子级都可以通过this.context直接访问。
兄弟关系的组件之间无法直接通信,它们只能利用同一层的上级作为中转站。而如果兄弟组件都是最高层的组件,为了能够让它们进行通信,必须在它们外层再套一层组件,这个外层的组件起着保存数据,传递信息的作用,这其实就是redux所做的事情。
组件之间的信息还可以通过全局事件来传递。不同页面可以通过参数传递数据,下个页面可以用location.param来获取。其实react本身很简单,难的在于如何优雅高效的实现组件之间数据的交流。
今天我们就来熟悉下react的context数据传递
没有使用Context的情况下传递数据, 我们可以参考React的文档: Context,
它是通过组件属性一级一级往下传递. 这种方式很麻烦, 如果组件树比较深, 必须在每一个路径上的节点都引入不必要的属性.
中间中间不再通过组件属性一级一级的往下传递了. 我们这里在
这样我们就可以在子组件中获取到父组件的数据了,不管多少层都能获取到。
组件层级嵌套到比较深,可以使用上下文getChildContext来传递信息,这样在不需要将函数一层层往下传,任何一层的子级都可以通过this.context直接访问。
兄弟关系的组件之间无法直接通信,它们只能利用同一层的上级作为中转站。而如果兄弟组件都是最高层的组件,为了能够让它们进行通信,必须在它们外层再套一层组件,这个外层的组件起着保存数据,传递信息的作用,这其实就是redux所做的事情。
组件之间的信息还可以通过全局事件来传递。不同页面可以通过参数传递数据,下个页面可以用location.param来获取。其实react本身很简单,难的在于如何优雅高效的实现组件之间数据的交流。
今天我们就来熟悉下react的context数据传递
没有使用Context的情况下传递数据, 我们可以参考React的文档: Context,
它是通过组件属性一级一级往下传递. 这种方式很麻烦, 如果组件树比较深, 必须在每一个路径上的节点都引入不必要的属性.
定义 Context 的根组件
import React from 'react'; # React 15.5版本以后, 使用PropTypes需要引入外部库, 直接使用React.PropTypes 会抛警告 import PropTypes from 'prop-types'; # React Router V4版本要从 react-router-dom 导入需要的组件 import { Route, Link } from 'react-router-dom'; import { Row, Col, Menu, Icon, Dropdown, Layout} from 'antd'; const { Sider, Content } = Layout; import UserList from './UserList'; import UserDetail from './UserDetail'; import Sidebar from '../_layouts/Sidebar'; const avatars = [ "elyse.png", "kristy.png", "matthew.png", ]; const data = []; for(let i = 0; i <= avatars.length; i++){ data.push({key: i, name: '胡彦祖3',age: 42,address: '西湖区湖底公园1号'}); } const columns = [ { title: 'ID',dataIndex: 'key',key: 'key'}, { title: '姓名',dataIndex: 'name',key: 'name', render: function(text, record, index) { return (<Link to={`/users/${index}`}><div style={{display: 'block'}}>{text}</div></Link>) }}, { title: '年龄',dataIndex: 'age',key: 'age'}, { title: '住址',dataIndex: 'address',key: 'address'}, { title: 'Action', key: 'action', render: function(text, record, index){ return ( <span> <a><Icon type="plus" /></a> <span className="ant-divider" /> <a><Icon type="close" /></a> </span> ) } } ]; class UserIndex extends React.Component { constructor(props){ super(props) } # 定义Context需要实现的方法 getChildContext() { return { data: data, columns: columns }; } render(){ return ( <Layout> <Sider> <div id="user-side-bar" className="side-bar"> <Sidebar/> </div> </Sider> <Content> <h2 className="pagetitle">用户信息页</h2> <Row gutter={16}> <Col span={16}> <UserList /> </Col> <Col span={4}> <Route path={`${this.props.match.url}/:id`} component={UserDetail}/> </Col> </Row> </Content> </Layout> ) } } # 声明Context类型 UserIndex.childContextTypes = { data: PropTypes.array, columns: PropTypes.array, }; export default UserIndex;
中间组件
中间中间不再通过组件属性一级一级的往下传递了. 我们这里在 render()函数中定义一个空的
<List/>:
import { Table, Icon } from 'antd'; import { Link } from 'react-router-dom'; import List from '../_common/List'; class UserList extends React.Component { constructor(props){ super(props) } render(){ return ( <div> <List /> </div> ) } } export default UserList;
子组件, 列表
import React from 'react'; import PropTypes from 'prop-types'; import { Layout, Table } from 'antd'; const { Sider, Content } = Layout; class List extends React.Component { constructor(props) { super(props); } render() { return ( <Content> <Table columns={this.context.columns} dataSource={this.context.data} size="middle" /> </Content> ); } } List.propTypes = { data: PropTypes.array, columns: PropTypes.array }; # 在这里声明 contextTypes 用于访问 UserIndex 组件中定义的Context数据. List.contextTypes = { data: PropTypes.array, columns: PropTypes.array }; export default List;
这样我们就可以在子组件中获取到父组件的数据了,不管多少层都能获取到。
相关文章推荐
- React之使用context传递数据
- vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
- java后台传递json数据到前端并渲染react组件(react+struts2)
- react(二)父子组件间的数据传递---prop
- react native使用react-navigation跳转后多页面数据传递总结
- vuejs2.0实现分页组件,使用$emit进行事件监听数据传递
- vuejs2.0实现分页组件,使用$emit进行事件监听数据传递
- React数据传递之组件内部通信的方法
- React学习(二)——组件的运用和数据传递
- 开始使用 Vuejs 2.0 --- 组件间数据传递
- vue组件详解(二)——使用props传递数据
- 安卓四大组件之一#2-一使用Intent显式意图实现界面跳转以及数据传递
- React技巧7(TodoList实现3组件之间传递数据之优化)
- job-React 组件之间的传递数据
- vue子组件使用自定义事件向父组件传递数据
- React(3)变量使用、变量更新、父子组件变量传递
- React 的数据流动(反向由子组件向父组件传递数据)
- react---组件间数据传递
- vuejs2.0实现分页组件,使用$emit进行事件监听数据传递
- react组件间的数据传递