React стили prop возвращает [объект объекта] для массива?

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>

Почему он дает мне [объект объекта] вместо встроенных стилей? Очевидно, мне здесь не нужно использовать массив, но я использую более сложный компонент.

Что я делаю неправильно?

ОБНОВЛЕНИЕ: Спасибо за ответы, ребята, но проблема в том, что я ХОЧУ использовать несколько стилей.

aka использовать 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-03-29: вместо того, чтобы полагаться на такую ​​зависимость, как lodash или же underscore или делать это вручную, вы можете использовать новый Object.assign особенность в 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" />;
    }
}

Answer 2

React ожидает, что объект будет передан как аргумент стилей, а не как массив, поэтому вам нужно изменить его на

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

Вы должны будете убедиться, что TileStyles возвращает (или является) объект и доступен в области видимости, в противном случае создайте функцию в области класса и вызовите ее с помощью

this.TileStyles()