鍍金池/ 問答/HTML/ 引用Text組件,每次都需要使用styleSet設(shè)置樣式,請(qǐng)問這段代碼能不能優(yōu)化

引用Text組件,每次都需要使用styleSet設(shè)置樣式,請(qǐng)問這段代碼能不能優(yōu)化下

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客戶全國感知監(jiān)控'}
                />

                <Texts
                    styleSet={{
                        left: '41.15px',
                        top: '174.86px',
                        width: '402px',
                        height: '30px',
                        position: 'absolute',
                        fontSize: '22px',
                        color:'#6FC4FF'
                    }}
                    text={'告警信息統(tǒng)計(jì)'}
                />

                <Texts
                    styleSet={{
                        left: '58.26px',
                        top: '758.41px',
                        width: '402px',
                        height: '30px',
                        position: 'absolute',
                        fontSize: '22px',
                        color:'#6FC4FF'
                    }}
                    text={'鏈路延時(shí)時(shí)間最高top10'}
                />

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

            </div>


        )
    }
}

export default AbbottTest;

回答
編輯回答
呆萌傻

styleSet有內(nèi)容全部寫到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客戶全國感知監(jiān)控'}
                />

                <Texts
                    styleSet={'styleSet2'}
                    text={'告警信息統(tǒng)計(jì)'}
                />

                <Texts
                    styleSet={''}
                    text={'鏈路延時(shí)時(shí)間最高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 
2017年4月16日 11:33