在React组件中将样式作为props传递

Question

我在React中创建了一个事件框组件。我的意图是每当调用时，我会将颜色值作为props传递，并在稍后用于设置其边框。目前，我设置了两个硬编码的类名，并将它们作为组件的props传递。是否有其他方法可以这样做，因为我无法将所有颜色类名都添加到样式表中。

组件代码

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;
}

- Pranay kumar

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

如果你正在使用TypeScript，当将style属性传递给EventBox组件时，你可以在你的IDE中添加自动完成功能。

import React from 'react';

const EventBox = ({ style }: { style?: React.CSSProperties }) => {
    return(
        <div className="col-md-12 event-box-container" style={style}>
        </div>
    )
}
export default EventBox;

- Anatol

---

这种使用style=的JS对象模式的官方名称是什么？这是_CSS in JS_吗？ - CodeFinity

@CodeFinity 这句话的意思是将内联样式作为JS对象传递。 - Anatol

@Anatol，如何在VSCode中添加自动完成功能？ - Aviral

@Aviral，你需要使用类似 TypeScript 的东西。以下是如何使用 TS 完成此操作的方法：https://dev59.com/-lcO5IYBdhLWcg3w-VxX#45116780 - Anatol

这个可以在内联样式中工作，但是当样式在scss文件中定义时该怎么传递呢？ - gavdix

Answer 2

另一种方法是使用styled-components。例如：

import styled from 'styled-components/native'

const Component = ({style}) => {

  return (
    <View style={style}>
    {/* More components here */}
    <View>
  )
}

const Styled = styled(Component)`
  padding-top: 10px;
`

- Kirill Novikov