数组的 React 样式 prop returns [object object]？

Question

我有这个非常基本的组件：

Tile = React.createClass({
    render: function(){
        var styles = [
            TileStyles.tile
        ];
        return (
            <div style={styles} test="test" />
        );
    }
});

不幸的是它正在产生这个html:

<div style="0:[object Object];" data-reactid=".0.[=12=]"></div>

为什么它给我 [object object] 而不是内联样式？显然我不需要在这里使用数组，但我在更复杂的组件上使用。

我做错了什么？

更新：感谢大家的回答，但问题是我希望能够使用多种样式。

也就是在某些情况下使用 TileStyles.tile 和 TileStyles.active。

Answer 1

React 期望将对象作为样式参数而不是数组传递，因此您需要将其更改为

Tile = React.createClass({
    render: function(){
        return (
            <div style={TileStyles} test="test" />
        );
    }
});

您必须确保 TileStyles returns 是一个（或是一个）对象并且在范围内是可访问的，否则，在 class 范围内创建一个函数并使用

this.TileStyles()

Answer 2

问题是（如前所述）您给样式属性一个数组，但期望是一个对象。所以只需将代码更改为：

Tile = React.createClass({
    render: function(){

        var style = _.extend({},TileStyles.tile,TileStyles.active);

        return (
            <div style={style} test="test" />
        );
     }
});

这里 _ 是对 lodash 或下划线的依赖。如果您将 TileStyles 定义为类似以下内容，这将起作用：

var TileStyles = {
    tile: { width: '200px', height: '200px', backgroundColor: 'blue' },
    active: { backgroundColor: 'green' }
}

如果您不想依赖 _，可以手动完成，但这可能很麻烦。

2016-03-29更新： 您可以使用 ecmascript 2015 中新的 Object.assign 功能，而不是依赖 lodash 或 underscore 之类的依赖项或手动执行。

var style = Object.assign({},TileStyles.tile,TileStyles.active);

或者以完全更新到 ecmascript 2015 的示例为例：

class Tile extends React.Component {
    render() {
        const style = Object.assign({},TileStyles.tile,TileStyles.active);
        return <div style={style} test="test" />;
    }
}

数组的 React 样式 prop returns [object object]？

React styles prop returns [object object] for an array?

javascript

inline-styles

reactjs