时间戳

首页 > 解决方案 > 如何在 React 和 CSS 之间进行通信

css - 如何在 React 和 CSS 之间进行通信

问题描述

我正在尝试创建一个代码，您可以在其中执行类似的操作

反应：

class app extends React.Component{
//states and stuff
render(){
<div>
<p className = "ellipse" x = {this.state.x} y={this.state.y} rx={this.state.rx} ry={this.state.ry}/>
<div/>

}
}

css

.ellipse{
x:(the input x)
y:(the input y)
rx:(the input rx)
ry:(the input ry)
}

这将创建一个以 x,y 为中心的椭圆，水平半径为 rx，垂直半径为 ry

标签： cssreactjs

解决方案

您可以将样式对象传递给您的 React 组件。

但请注意，CSS 属性应该是驼峰式的。是marginLeft和paddingLeft。

然后，您可以将您的样式对象连接到您的反应状态。

例子 ：-

const [padding, setPadding] = React.useState(10);

<div style={{ paddingLeft: `${padding}px` }} />

推荐阅读