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使用＆＃34;对＆＃34;风格以及＆＃34;内联＆＃34;

*我不确定我是否正在使用这些项目的正确名称，因为我对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（第4阶段提案 - 可能需要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：结合倍数

2 个答案: