Как получить css свойства с помощью React?

438

07 января 2017, 15:42

Есть код

   linkList=linkStyles.map((linkstyle)=>
     <div>
        <Link linkstyle={linkstyle}/>
        <div> color: {$('.'+{linkstyle}).css('color')}</div>
        <div> text-decoration: {$('.'+linkstyle).css('text-decoration')}</div>
     </div>);

linkStyles это массив названий css классов, я хочу вывести свойства каждого класса из этого массива, но не знаю, как именно мне поместить переменную внутрь выражения. Код выше не работает. Можно ли вообще это сделать? Если да то как?

Спасибо!

Answer 1

Код достаточно грязный, выложен с целью показать принцип. Можно сделать чище, и используя всякий сахар вроде компонентов-чистых функций.
Мне было лень разбираться с тем что для этого надо подключать в jsfiddle, поэтому я использовал React.createClass.

Собственно вопроса тут по сути два:
- Где взять стили?
- Как на реакте надо получать DOM ноду?

jQuery - не нужен.
Решать это с помощью jQuery - не стоит, потому что jQuery работает с реально существующим домом, никто не гарантирует что реакт его как-то хитро не поменяет, а jQuery про это не узнает ничего.

Где взять стили?
Это обычное DOM API, без вмешательства реакта. Пути я вижу два: отрисовать элемент с соответствующим и взять у него стили которые посчитались или лезть в document.styleSheets, выдернуть оттуда нужный фрагмент со стилями и взять из него. Я использовал первый путь, потому что мне так было проще,и для задачи автора этого вроде достаточно.

То есть, window.getComputedStyle(DOM нода).getPropertyValue(имя свойства)

В этом подходе есть нюанс: нужно отрисовывать список со свойствами после того, как у нас элемент из которого свойства берутся - существует. Для этого у компонента StyleExample есть состояние propertiesSource, которое изменяется после первой итерации отрисовки компонента с помощью componentDidMount, и условие в методе рендер, которое не отрисовывает список свойств, пока его еще нет.

Как работать с DOM в реакте?
В тех случаях когда это нужно (а это реально реже, чем кажется), используются refs.

const StylesContainer = React.createClass({ 
  render: function() { 
    return <div>Здесь список классов: 
        { 
            this.props.classes.map(cls => <StyleExample clsName = {cls} key = {cls}/>) 
        } 
    </div>; 
  } 
}); 
 
const StyleExample = React.createClass({ 
    styleProperties: [ 
        'color', 
        'text-decoration' 
    ], 
     
    getInitialState: function(){ 
        return {propertiesSource: null}; 
    }, 
     
    componentDidMount: function(){ 
       this.setState({propertiesSource: this.getPropertiesSource()}) 
    }, 
     
    getPropertiesSource(){ 
       let ref = this.refs[this.props.clsName], 
           node = ReactDOM.findDOMNode(ref); 
       return window.getComputedStyle(node); 
    }, 
     
    render: function(){ 
        return <div> 
            <LinkMock ref = {this.props.clsName} clsName = {this.props.clsName} /> 
            {this.state.propertiesSource ? 
            <StylePropertiesList styleProperties = {this.styleProperties}  
                                 propertiesSource = {this.state.propertiesSource} 
            /> : null} 
        </div> 
    } 
}); 
 
const LinkMock = React.createClass({ 
	  render: function(){ 
        return <div className = {this.props.clsName}>Я типа линк {this.props.clsName}</div> 
    } 
}); 
 
const StylePropertiesList = React.createClass({ 
    getPropertyValue: function(propertyName){ 
        return this.props.propertiesSource.getPropertyValue(propertyName); 
    }, 
    render: function(){ 
        return <div> 
            { 
                this.props.styleProperties.map(propertyName => 
                    <div>{propertyName}: {this.getPropertyValue(propertyName)}</div> 
                ) 
            } 
        </div> 
    } 
}); 
 
ReactDOM.render( 
  <StylesContainer 
      classes={["awesomeCls", "greatCls"]} 
  />, 
  document.getElementById('container') 
);

.awesomeCls{ 
  color: red; 
  text-decoration: underline; 
} 
 
.greatCls{ 
  color: blue; 
  text-decoration: overline; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"> 
    <!-- This element's contents will be replaced with your component. --> 
</div>

Answer 2