2015-11-12 2 views
1

Давайте я описать мою проблему:JavaScript стиль, как применять два класса

У меня есть Реагировать компонент, как показано ниже

import React from 'react'; 

class Question extends React.Component{ 
    render(){ 
    return <div className="view fourth-effect"> 
     <a 
     href={this.props.link} 
     title="Full Image"> 
      <img src={this.props.image}/> 
     </a> 
     <div className="mask"></div> 
     <span className='title'>{this.props.title}</span> 
     <span className='owner'>{this.props.owner}</span> 
    </div> 
    } 
} 

Question.propTypes = { 
    title: React.PropTypes.string.isRequired, 
    owner: React.PropTypes.string.isRequired, 
    image: React.PropTypes.string.isRequired, 
    link : React.PropTypes.string.isRequired 
}; 

Question.defaultProps = { 
    title: 'none', 
    owner: '-', 
    image: '-', 
    link : '-' 
}; 

export default Question 

для укладки я использую файл CSS. И теперь я интересно использовать встроенный стиль с Реагировать, но я застрял ...

Как я могу применить два класса для React элемента, как я сделать в CSS

<div className="view fourth-effect"> 

только с помощью JS объект должен быть чем-то вроде этого ...

<div style={Style.question}> /*JS style object*/ 

Как объединить два класса, используя встроенный стиль в React?

Заранее благодарен!

+0

Вероятно, вы бы instrested в [Радий] (http://projects.formidablelabs.com/radium/). Он позволяет использовать псевдо-селеры ': hover',': focus', ': active', а также автоматически добавляет префиксы поставщика – imkost

+0

@imkost, спасибо, я слышал о Radium, но сейчас я хотел бы обобщить свои знания вокруг React и JS Core –

ответ

1

Атрибут style также принимает массив. Так что вы можете сделать:

<div style={[Style.question, Style.new]}>

+0

Yeap благодарит! –

Смежные вопросы