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 React from 'react';
import PropTypes from 'prop-types';

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;