javascript - 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

问题是(如前所述)您为样式属性提供了一个数组，但期望的是一个对象。所以只需将代码更改为:

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 更新:您可以使用新的 Object.assign 而不是依赖 lodash 或 underscore 或手动完成依赖项ecmascript 2015 中的功能。

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