[英]How do I add css variable into a reactJS component that is written with es6?
我的問題真的很簡單,您注意到我在這里有一個名為frameStyle的css變量。
var Frame = React.createClass({
getInitialState: function() {
return {hover: false}
},
toggleHover: function(e) {
this.setState({
hover: !this.state.hover
})
},
render: function() {
if (this.state.hover){
linkStyle = "blue";
}else{
linkStyle = "red";
}
var frameStyle = {
width: 100,
height: 100,
backgroundColor: {this.props.linkStyle}
};
return (
<div onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover} style={frameStyle}>
</div>
);
}
});
如果要使用ES6編寫組件,如何添加類似內容? 如果有人能指出正確的方向,我將不勝感激!
If I have understood your question you want to create component using extending class in react ja.
import React from ‘react’;
class Frame extends React.component{
constructor(props){
super(props);
this.props = props;
this.state = { hover: false}
},
toggleHover = (e) =>{
this.setState({
hover: !this.state.hover
})
},
render() {
if (this.state.hover){
linkStyle = "blue";
}else{
linkStyle = "red";
}
var frameStyle = {
width: 100,
height: 100,
backgroundColor: {this.props.linkStyle}
};
return (
<div onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover} style={frameStyle}>
</div>
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.