我在react中创建了一个事件框组件。我想要的是什么时候调用它,我将颜色值作为prop传递,然后习惯于设置其边界。目前,我设置了两个硬编码的类名,并将它们作为prop传递给组件。还有其他方法可以执行,因为我无法在样式表中添加所有颜色类名称。
组件代码
import React from 'react';
class EventBox extends React.Component{
constructor(props)
{
super(props);
this.state={
}
}
render()
{
const style={
marginBottom:'0px'
}
const list={
display:'inline-flex',
width:'100%',
marginBottom:'10px'
}
const listItem={
flex:'1',
display:'flex'
}
return(
<div className={this.props.class}>
<ul className="list list-inline" style={list}>
<li className="list-inline-item color-golden" style={listItem}>1 March 2020</li>
<li className="list-inline-item color-red flex flex-end" style={listItem}>200 People Interested</li>
</ul>
<h3 className="sub-heading roboto">Title</h3>
<p className="paragraph roboto" style={style}>Saket, New Delhi</p>
<p className="paragraph roboto" style={style}>Time: 05:00 P.M - 06:30 P.M</p>
</div>
)
}
}
export default EventBox;
<EventBox class="col-md-12 event-box-container red-border" />
<EventBox class="col-md-12 event-box-container green-border" />
的CSS
.event-box-container.red-border{
border-top: 8px solid red;
}
.event-box-container.green-border{
border-top: 8px solid green;
}
您可以将动态样式作为对象传递给组件。
对于基于类的组件:
import React from 'react';
class EventBox extends React.Component{
render() {
return(
<div className="col-md-12 event-box-container" style={this.props.style}>
</div>
)
}
}
export default EventBox;
对于功能组件:
import React from 'react';
const EventBox = ({ style }) => {
return(
<div className="col-md-12 event-box-container" style={style}>
</div>
)
}
export default EventBox;
用法
<EventBox style={{ borderTop: '8px solid red' }} />
<EventBox style={{ borderTop: '8px solid green' }} />
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句