引用Text组件，每次都需要使用styleSet设置样式，请问这段代码能不能优化下

Question

import React from 'react'
class Text extends React.Component {
    constructor(props) {
        super(props);
        this.state = {number: 0};
    }
    componentDidMount() {

    }
    render() {
        return (
            <div className='text' style={this.props.styleSet}>
                {this.props.text}
            </div>
        )
    }
}


export default Text;

import React from 'react';
import Texts from '../../../../components/Texts/';

/**
 * 装备
 */
class AbbottTest extends React.Component {
    constructor() {
        super();

        this.handleClick=this.handleClick.bind(this)
    }

    handleClick() {
        console.log('isRed')
        this.setState({isRed : !this.state.isRed});
        console.log(this.state.isRed)

    }

    render() {
        var divStyle ={

        }

        var redStyle = {
            display: 'block',
            width: 500,
            height: 500
        };


        var  blueStyle= {
            display: 'none'
        };


        return (

            <div style={divStyle} className='data-line'>

                <Texts
                    styleSet={{
                        left: '765.5px',
                        top: '45px',
                        width: '389px',
                        height: '40px',
                        position: 'absolute',
                        fontSize: '28px',
                        color:'#FFFFFF'
                    }}
                    text={'北京电信IDC客户全国感知监控'}
                />

                <Texts
                    styleSet={{
                        left: '41.15px',
                        top: '174.86px',
                        width: '402px',
                        height: '30px',
                        position: 'absolute',
                        fontSize: '22px',
                        color:'#6FC4FF'
                    }}
                    text={'告警信息统计'}
                />

                <Texts
                    styleSet={{
                        left: '58.26px',
                        top: '758.41px',
                        width: '402px',
                        height: '30px',
                        position: 'absolute',
                        fontSize: '22px',
                        color:'#6FC4FF'
                    }}
                    text={'链路延时时间最高top10'}
                />

                <Texts
                    styleSet={{
                        left: '1467px',
                        top: '416.73px',
                        width: '402px',
                        height: '34px',
                        position: 'absolute',
                        fontSize: '22px',
                        color:'#6FC4FF'
                    }}
                    text={'链路丢包率最高top10'}
                />

            </div>


        )
    }
}

export default AbbottTest;

Answer 1

把styleSet有内容全部写到css中，这里只引入className就可以了。

mport React from 'react'
class Text extends React.Component {
    constructor(props) {
        super(props);
        this.state = {number: 0};
    }
    componentDidMount() {

    }
    render() {
        return (
            <div className={`text ${this.props.styleSet}`}>
                {this.props.text}
            </div>
        )
    }
}


export default Text;

import React from 'react';
import Texts from '../../../../components/Texts/';
import './styles.css';

/**
 * 装备
 */
class AbbottTest extends React.Component {
    constructor() {
        super();

        this.handleClick=this.handleClick.bind(this)
    }

    handleClick() {
        console.log('isRed')
        this.setState({isRed : !this.state.isRed});
        console.log(this.state.isRed)

    }

    render() {
        var divStyle ={

        }

        var redStyle = {
            display: 'block',
            width: 500,
            height: 500
        };


        var  blueStyle= {
            display: 'none'
        };


        return (

            <div style={divStyle} className='data-line'>

                <Texts
                    styleSet={'styleSet1'}
                    text={'北京电信IDC客户全国感知监控'}
                />

                <Texts
                    styleSet={'styleSet2'}
                    text={'告警信息统计'}
                />

                <Texts
                    styleSet={''}
                    text={'链路延时时间最高top10'}
                />

                <Texts
                    styleSet={''}
                    text={'链路丢包率最高top10'}
                />

            </div>


        )
    }
}

export default AbbottTest;

.styleSet1 {
    left: 765.5px;
    top: 45px;
    width: 389px;
    height: 40px;
    position: absolute;
    fontSize: 28px;
    color:#FFFFFF;
}
//others