在反应组件中将样式作为道具传递

Posted 2023-02-22

【中文标题】在反应组件中将样式作为道具传递

【英文标题】：Pass style as props in react component

【发布时间】：2020-07-28 07:18:46

【问题描述】：

我在 react 中创建了一个事件框组件。我想要的是每当它被调用时，我将颜色值作为道具传递，这些道具后来被用来设置它的边框。目前，我设置了两个硬编码的类名，并将它们作为组件传递给组件。有没有其他方法可以做到这一点，因为我无法在我的样式表中添加所有颜色类名称。

组件代码

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;

【参考方案1】：

您可以将动态样式作为对象传递给组件。

对于基于类的组件：

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'   />

【讨论】：

这种使用style=作为JS对象的模式的正式名称是什么？这是 JS 中的 CSS 吗？

@CodeFinity 它只是将内联样式作为 JS 对象传递

@Anatol 如何在 vscode 中添加自动完成功能？

@Aviral 你必须使用 TypeScript 之类的东西。以下是使用 TS ***.com/a/45116780/11804213

的方法