UNPKG

zent

Version:

一套前端设计语言和基于React的实现

104 lines (86 loc) 2.14 kB
import React, { Component, PropTypes } from 'react'; import Portal from '../src'; import '../assets/context.scss'; /* **react<=15.2.1的版本有bug,除了initial render外context不会更新** https://github.com/facebook/react/pull/7125 这个例子使用了[context](https://facebook.github.io/react/docs/context.html),context 可以正确在Portal中传递。 */ function exposeStore(BaseComponent) { return class ExposeStoreWrapper extends Component { static contextTypes = { store: PropTypes.object.isRequired }; render() { const { store } = this.context; return <BaseComponent store={store} />; } }; } const Child = exposeStore(class _Child extends Component { static propTypes = { store: PropTypes.object.isRequired }; render() { const { store } = this.props; const { count } = store; return <div className="child">store: {count}</div>; } }); export default class Parent extends Component { state = { store: { count: 0 }, visible: false }; static childContextTypes = { store: PropTypes.object.isRequired }; getChildContext() { return { store: this.state.store }; } inc = () => { const { store } = this.state; this.setState({ store: { count: store.count + 1 } }); }; dec = () => { const { store } = this.state; this.setState({ store: { count: store.count - 1 } }); }; open = () => { this.setState({ visible: true }); }; close = () => { this.setState({ visible: false }); }; render() { const { visible } = this.state; return ( <div className="parent"> <Portal className="context-portal" visible={visible}> <Child /> </Portal> {!visible && <button onClick={this.open} className="btn-open">open</button>} {visible && <button onClick={this.close} className="btn-close">close</button>} <button onClick={this.inc} className="btn-inc">+</button> <button onClick={this.dec} className="btn-dec">-</button> </div> ); } }