javascript - React styles prop returns [object object] for an array? - Stack Overflow

admin管理员组

文章数量:1289497

I've got this very basic ponent:

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

Unfortunately it is producing this html:

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

Why does it give me [object object] instead of the inline styles? Obviously I don't need to use an array here but I do on a more plex ponent.

What am I doing wrong?

UPDATE: Thanks for the answers guys but the issue is I WANT to be able to use multiple styles.

aka use TileStyles.tile and TileStyles.active under certain circumstances.

I've got this very basic ponent:

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

Unfortunately it is producing this html:

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

Why does it give me [object object] instead of the inline styles? Obviously I don't need to use an array here but I do on a more plex ponent.

What am I doing wrong?

UPDATE: Thanks for the answers guys but the issue is I WANT to be able to use multiple styles.

aka use TileStyles.tile and TileStyles.active under certain circumstances.

• javascript
• reactjs
• inline-styles

Share Improve this question Follow edited Mar 16, 2017 at 15:29 baao 73.3k1818 gold badges150150 silver badges207207 bronze badges asked May 1, 2015 at 21:33 gbachikgbachik 1,70633 gold badges1717 silver badges3030 bronze badges 4

• check your browser console - it should be generating an error along the lines of "you must pass a style object". You can't pass an array into the JSX style attribute. – Mike 'Pomax' Kamermans Commented May 1, 2015 at 21:39
• gotcha... I can do this on react-native so I assumed I could here as well. Oh will thanks for the help guys – gbachik Commented May 1, 2015 at 21:52
• worth not doing using react-native, too =) – Mike 'Pomax' Kamermans Commented May 1, 2015 at 22:11
• I ran in to this issue because I got linked to this article: github./reactjs/react-future/blob/master/04%20-%20Layout/… without noticing it was about react-future. Glad you brought it up here. – Ted A. Commented Oct 16, 2015 at 0:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The problem is (as already stated) that you give the style property an array, but an object is expected. So simply changing the code to this:

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

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

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

Here _ is a dependency on either lodash or underscore. This will work if you defined TileStyles as something like:

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

If you don't want a dependency on _, it is possible to do it by hand, but it can be a hassle.

Update 2016-03-29: Instead of relying on a dependency like lodash or underscore or doing it by hand, you can use the new Object.assign feature in ecmascript 2015.

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

Or take the example fully updated to ecmascript 2015:

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

React is expecting an object to be passed as styles argument, not an array, so you will need to change it to

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

You will have to make sure that TileStyles returns an (or is an) object and is accesible within the scope, otherwise, create a function in the class scope and call it with

this.TileStyles()

本文标签： javascriptReact styles prop returns object object for an arrayStack Overflow