JSX Style Var：组合多个

Question

有没有办法将多个样式对象组合到一个组件中？

export default class Footer extends React.Component{
render(){
    var inline = {
        display: "inline-block",
        margin: "3px"
    };
    var right = {
        textAlign: "right"
    }
    var containerStyle = {
        padding: "8px",
        color: "#DDD",
        backgroundColor: "#000",
        fontSize: "12pt"
    };

    return(
        <footer style = { containerStyle }>
            <div className="inline" style = {inline}>Managed By <a href="http://www.midnighthtml.com">MidnightHTML</a></div>
            <div className="inline" style = {right}>All Rights Reserved</div>
        </footer>
    );
}

}

我希望第二个 div 使用 "right" 样式以及 "inline"

*我不确定我是否为这些项目使用了正确的名称，因为我刚接触 React。

Answer 1

您可以使用 Object.assign() 组合对象：

return(
    <footer style = { containerStyle }>
        <div className="inline" style = {inline}>Managed By <a href="http://www.midnighthtml.com">MidnightHTML</a></div>
        <div className="inline" style = {Object.assign({}, right, inline)}>All Rights Reserved</div>
    </footer>
);

或object spread (stage 4 proposal - might require a babel transform):

return(
    <footer style = { containerStyle }>
        <div className="inline" style = {inline}>Managed By <a href="http://www.midnighthtml.com">MidnightHTML</a></div>
        <div className="inline" style = {{ ...right, ...inline }}>All Rights Reserved</div>
    </footer>
);

Answer 2

你可以这样做：

var inline = {
    display: "inline-block",
    margin: "3px"
};

var right = {
    textAlign: "right"
}

...

var combination = { ...inline, ...right };

return(
    <footer style = { containerStyle }>
        <div className="inline" style = {inline}>Managed By <a href="http://www.midnighthtml.com">MidnightHTML</a></div>
        <div className="inline" style = {combination}>All Rights Reserved</div>
    </footer>
);

JSX Style Var：组合多个

JSX Style Var: Combining Multiples

javascript

css

reactjs