javascript - JSX 样式变量 : Combining Multiples

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 使用“正确”样式以及“内联”

*我不确定我是否为这些元素使用了正确的名称，因为我是 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>
);