怎么让react中某个组件全屏显示

发表于 | |

怎么让react某个组件全屏

需求为高德地图组件增加一个全屏显示功能，但其自api自带控件没有此功能

事件

1
2
3
4
5
6
7
8
9
10
11
12
13
   constructor(props, context) {
	super(props, context);
	this.key = randomStr();
	this.state = {
		id: 0, // 投放点id
		deviceCount: 0,
		isfullscreen: false
	};
}
switchFullscreen(){
	this.setState({isfullscreen: !this.state.isfullscreen});
	console.log(this.state);
}
1
2
3
4
5
<div style={styles.main} onKeyDown={this.switchFullscreen.bind(this)}>
	<Button onClick={this.switchFullscreen.bind(this)}>全屏</Button>
	<div style={this.state.isfullscreen ? styles.fullscreen : styles.height} id={this.key} />
	{sidebarProps.id ? <Sidebar {...sidebarProps} data={queryData} /> : null}
</div>

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const styles = {
	height: {
		height: '650px'
	},
	fullscreen: {
		zIndex: '999',
		position: 'fixed',
		top: '0',
		bottom: '0',
		left: '0',
		right: '0'
		},
	main: {
		position: 'relative'
	}
};