Javascript React styles prop为数组返回[object]？

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

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

Tile=React.createClass({
render:function（）{
变量样式=[
瓷砖
];
返回(
);
}
});

不幸的是，它正在生成以下html：

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

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

我做错了什么

更新： 谢谢大家的回答，但问题是我希望能够使用多种风格

---

aka在某些情况下使用TileStyles.tile和TileStyles.active。

React希望将对象作为styles参数而不是数组传递，因此需要将其更改为

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

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

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

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

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

如果您不希望依赖于

。

，可以手动完成，但这可能会很麻烦

更新2016-03-29: 您可以使用ecmascript 2015中的新功能，而不必依赖于像

lodash

或

下划线

这样的依赖项，也不必手动操作

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.Component{
render（）{
const style=Object.assign（{}，TileStyles.tile，TileStyles.active）；
返回；
}
}

检查您的浏览器控制台-它应该会生成一个“您必须传递样式对象”的错误。无法将数组传递到JSX样式属性中。明白了。。。我可以在react native上这样做，所以我想我在这里也可以。哦，非常感谢guysworth没有使用react-native的帮助（=）我遇到了这个问题，因为我链接到了这篇文章：没有注意到这是关于react-future的。很高兴你把它带到这里。谢谢，但问题是我想能够使用多种风格。aka使用TileStyles.tile+TileStyles.active.Like通过状态变量控制它？如果是的话，我对答案有一个小小的改变。哦，我想我知道了。你想像css那样堆叠样式，对吧？没错！事实上，我找到了你一小时前更新的解决方案！感谢验证没有问题，很高兴我们找到了正确的解决方案：）如果您愿意，您可以通过使用extend预构建TileStyles对象来改进此功能，以使用具有相同功能的预构建样式。谢谢，但问题是我希望能够使用多个样式。aka使用TileStyles.tile+TileStyles.active。

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

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