zent
Version:
一套前端设计语言和基于React的实现
74 lines (63 loc) • 1.71 kB
JavaScript
import React, { Component, PropTypes } from 'react';
import Portal from '../src';
import '../assets/state.scss';
class SimpleState extends Component {
static propTypes = {
inc: PropTypes.func.isRequired,
close: PropTypes.func.isRequired,
count: PropTypes.number.isRequired
};
render() {
const { inc, close, count } = this.props;
return (
<div>
<span className="state-count">{count}</span>
<button onClick={inc} className="btn-inc">+</button>
<button onClick={close} className="btn-close">close</button>
</div>
);
}
}
/*
如果Portal的children变了,这个portal不会先unmount再mount,而是直接更新root component
*/
export default class State extends Component {
state = {
visible: false,
count: 0
};
onClose = () => {
this.setState({
visible: false
});
};
onOpen = () => {
this.setState({
visible: true
});
};
inc = () => {
const { count } = this.state;
this.setState({
count: count + 1
});
};
saveRef = (inst) => {
this.stateContainer = inst;
};
render() {
const { visible } = this.state;
return (
<div className="state-example">
{visible ?
<button onClick={this.onClose} className="btn-close">close</button> :
<button onClick={this.onOpen} className="btn-open">open</button>
}
<Portal className="state-body-portal" visible={this.state.visible} onClose={this.onClose}>
{/* ref在测试代码里用了,不要删掉 */}
<SimpleState inc={this.inc} count={this.state.count} close={this.onClose} ref={this.saveRef} />
</Portal>
</div>
);
}
}