Question

我读了几个答案，所有这些似乎都假设您有一个包含CSS的对象而不是单个属性，我尝试了答案，但无法正常工作，我想知道是什么问题最好的方法是什么，这是我到目前为止所做的：

import React from 'react';
import FormLabel from '@material-ui/core/FormLabel';

const label = (props) => {
    // <label onClick={props.onClick} className={props.className + ' ' + props.gridClass} style={props.inlineStyle} >{props.label}</label>
    let divStyleArray = [];

    if (typeof props.inlineStyle.background !== 'undefined') {        
        divStyleArray.push(props.inlineStyle.background)
        delete props.inlineStyle.background
    }

    if (typeof props.inlineStyle.textAlign !== 'undefined') {
        divStyleArray.push(props.inlineStyle.textAlign)
        delete props.inlineStyle.textAlign
    }

    const customStyle = {
        width: '100%'
    }

    const divStyle = Object.assign({}, ...divStyleArray);

    return (
        <div className={props.gridClass} style={{divStyle}}>
            <FormLabel component="label" onClick={props.onClick} style={{ ...customStyle, ...props.inlineStyle }}>{props.label}</FormLabel>
        </div>
    )
}


export default label;

我的目标是提取几个CSS属性，将其提供给div，然后将其余内容提供给div内部的内容
更新01：
我尝试了给出的答案，但似乎无法正常工作，这是我所做的：

import React from 'react';
import FormLabel from '@material-ui/core/FormLabel';

const label = (props) => {
    let inlineStyle = {
        ...props.inlineStyle
    }

    const divStyle = {
        background: inlineStyle.background,
        textAlign: inlineStyle.textAlign,
    }

    delete inlineStyle.background;
    delete inlineStyle.textAlign;

    const customStyle = {
        width: '100%'
    }    

    return (
        <div className={props.gridClass} style={divStyle}>
            <FormLabel component="label" onClick={props.onClick} style={{ ...customStyle, ...inlineStyle }}>{props.label}</FormLabel>
        </div>
    )
}

export default label;

Answer 1

首先，从props对象中删除内容将是反模式，或者据我所知至少是不良做法。

如果仅需要在此处使用的两个属性，则可以使用以下代码：

const label = (props) => {
    let divStyle = {
        background: props.background,
        textAlign: props.textAlign,
    };

    const customStyle = {
        width: '100%'
    }
    return (
        <div className={props.gridClass} style={{divStyle}}>
            <FormLabel
                component="label"
                onClick={props.onClick}
                style={{
                  ...customStyle,
                  ...props.inlineStyle,
                  background: undefined,
                  textAlign: undefined,
                }}
            >{props.label}</FormLabel>
        </div>
    )
}

如何提取和合并内联CSS样式属性

1 个答案: