react之使用Context跨组件树传递数据
来源:互联网 发布:化工控制软件 编辑:程序博客网 时间:2024/06/01 10:46
react推崇的是单向数据流,自上而下进行数据的传递,但是由下而上或者不在一条数据流上的组件之间的通信就会变的复杂。解决通信问题的方法很多,如果只是父子级关系,父级可以将一个回调函数当作属性传递给子级,子级可以直接调用函数从而和父级通信。
组件层级嵌套到比较深,可以使用上下文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;
这样我们就可以在子组件中获取到父组件的数据了,不管多少层都能获取到。
阅读全文
0 0
- react之使用Context跨组件树传递数据
- React之使用context传递数据
- React数据传递---context
- react---组件间数据传递
- react学习之路(2.2)-----数据传递(props(子传父级),context)
- react组件间的数据传递
- job-React 组件之间的传递数据
- react组件间数据传递(笔记)
- React Native学习笔记之--组件之间数据的传递和跳转
- Intent之使用Extra属性在组件之间传递数据
- react(二)父子组件间的数据传递---prop
- React Native之组件请求网络数据
- Context 传递数据(转载)
- Context 传递数据
- React 的数据流动(反向由子组件向父组件传递数据)
- vue.js 组件 之 prop 传递数据
- React Native 之组件react-native-sound的使用
- react 数据传递
- [洛谷1341]无序字母对---欧拉回路/通路
- vs2013 编译libevent以及出现的问题
- 两列自适应布局
- 机器视觉系统与CMM的集成
- 如何远程别人的桌面
- react之使用Context跨组件树传递数据
- 数据库中的换行符 (\n)在html界面不能识别怎么办
- js数组去重方法(语法少、轻快)
- ubuntu 16.04 ARM 更新源
- 101个MySQL的调节和优化
- 前端代码规范
- 如何应对别人说你的设计还可以更完美
- 匿名内部类的方法参数一定要设置final
- curl模拟http发送get或post请求