☰

Reactコンポーネントでスタイルをpropsとして渡す 質問する

tag-icon • tag-icon reactjs typescript react-native react-component
Reactコンポーネントでスタイルをpropsとして渡す 質問する

私は react でイベント ボックス コンポーネントを作成しました。私が望んでいるのは、それが呼び出されるたびに、後で境界線を設定するために使用される色の値をプロパティとして渡すことです。現在、2 つのハードコードされたクラス名を設定し、コンポーネントとともにプロパティとして渡しています。スタイルシートにすべての色のクラス名を追加できないため、これを行う他の方法はありますか。

コンポーネントコード


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

CS

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

styleTypeScript を使用している場合は、プロパティをコンポーネントに渡すときに IDE に自動補完を追加できますEventBox。

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;

おすすめ記事