React 样式 prop 为数组返回 [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.$0"></div>

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

我究竟做错了什么？

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

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

Answer 1

问题是（如前所述）您为 style 属性提供了一个数组，但需要一个对象。所以只需将代码更改为：

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 年 3 月 29 日更新：您可以使用ecmascript 2015 中的新功能， 而不是像依赖lodash或underscore手动那样依赖依赖Object.assign项。

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" />;
    }
}