react中glamor与react-resizable插件的使用_react resizable 官网-优快云博客

本文链接：https://blog.youkuaiyun.com/onemango/article/details/90298329

本文介绍了如何在React项目中使用glamor进行css-in-js的实现，详细讲解了安装与使用方法。同时，文章探讨了react-resizable插件，用于创建可拉伸调整大小的组件，提供了github链接以及安装和使用教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

glamor

glamor是一款css-in-js的插件

github地址：https://github.com/threepointone/glamor

Installation

npm install glamor --save

Usage

我所用到的是将style对象转化为类名字符串形式的部分：

import React from 'react';
import {css} from 'glamor';
export default class Demo extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			width : 600
		}
	}
	
	render(){
		const widthStyle = {
			width: this.state.width
		};
		const widthClasses = css(widthStyle);
		const widthClassName = widthClasses.toString();
	
		return <div className={widthClassName}></div>
	}
}

react-resizable

react-resizable是一款可拉伸调整大小的react插件

github地址：https://github.com/STRML/react-resizable

Installation

npm install --save react-resizable

Usage

import React from 'react';
import {Resizable,ResizableBox} from 'react-resizable';
import 'react-resizable/css/styles.css';
export default class Demo extends React.Component{
	constructor(){
		super();
		this.state = {
			width: 600
		}
	}
	
	onResize = (event, { element, size }) => {
		this.setState({width: size.width})
	}
	
	render(){
		return (
			<Resizable axis='x' height={height} width={this.state.width} onResize={this.onResize} resizeHandles={['w']}>
				<div>需要调整的盒子</div>
			</Resizable>
		)
	}
}