账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    React项目中,一段代码求优化
    30
    0
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './assets/styles/index.less';
    
    import Green from './assets/images/green.png';
    import Red from './assets/images/red.png';
    
    class Circle extends React.Component {
    
        constructor() {
            super();
            this.state = {
                safety: []
            }
        }
    
        render() {
    
            const _self = this;
    
            //console.log('_self.props.styleSet =', _self.props.styleSet)
            let divStyle = {
                //
            }
    
            let safetyData = {};
    
    
    
            if(this.state.safety.length !== 0) {
                this.state.safety.map(function (item) {
                    safetyData[item['name']] = item['value']
                })
            }
    
    
    
            let cI = Red
    
    
            return (
                    <div
                        ref={(elem) => { this.element = elem; }}
                        className={'safety_div'}
                    >
                        <div className={'safety_title'}>
                            <div className={'item item1'}>已处理漏洞数</div>
                            <div className={'item item2'}>基线配置不当数</div>
                            <div className={'item item3'}>暴力破解数</div>
                            <div className={'item item4'}>弱口令数</div>
                        </div>
    
    
                        <div className={'safety_img'}>
                            <div
                                className={'item item1'}
                            >
                                <img src={safetyData['handle'] === 0?Red:Green} />
                            </div>
                            <div
                                className={'item item1'}
                            >
                                <img src={safetyData['configuration'] === 0?Red:Green} />
                            </div>
                            <div
                                className={'item item1'}
                            >
                                <img src={safetyData['violentBreak'] === 0?Red:Green} />
                            </div>
                            <div
                                className={'item item1'}
                            >
                                <img src={safetyData['weakPassword'] === 0?Red:Green} />
                            </div>
                        </div>
    
                        <div className={'safety_figure'}>
                            <div
                                className={'item item1'}
                                style = {{
                                    color: safetyData['handle'] === 0?'#FF2366':'#2AF4FF'
                                }}
                            >
                                {safetyData['handle']}
                            </div>
                            <div
                                className={'item item2'}
                                style = {{
                                    color: safetyData['configuration'] === 0?'#FF2366':'#2AF4FF'
                                }}
                            >
                                {safetyData['configuration']}
                            </div>
                            <div
                                className={'item item3'}
                                style = {{
                                    color: safetyData['violentBreak'] === 0?'#FF2366':'#2AF4FF'
                                }}
                            >
                                {safetyData['violentBreak']}
                            </div>
                            <div
                                className={'item item4'}
                                style = {{
                                    color: safetyData['weakPassword'] === 0?'#FF2366':'#2AF4FF'
                                }}
                            >
                                {safetyData['weakPassword']}
                            </div>
                        </div>
    
                    </div>
    
            )
        }
    
        componentDidMount() {
            //
        }
    
        componentWillReceiveProps(nextProps) {  // 接收新的参数
            //console.log(nextProps.data);
            this.setState({
                safety: nextProps.safety
            });
        }
    
        componentDidUpdate() {
            //
        }
    }
    
    
    export default Circle;
    
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答