There is a code

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

linkStyles is an array of css class names, I want to display the properties of each class from this array, but I don’t know exactly how to put the variable inside the expression. The code above does not work. Is it even possible to do this? If so, how?

Thank!

  • @ Duck Teaches Mind works, thank you very much! make out as the answer - Oloji

2 answers 2

The code is rather dirty, laid out in order to show the principle. You can make it cleaner, and using any kind of sugar components-pure functions.
I was too lazy to deal with the fact that it needs to be connected to jsfiddle, so I used React.createClass.

Actually there are essentially two questions here:
- Where to get styles?
- How do I get a DOM node in the reactor?

jQuery is not needed.
Solving this with jQuery is not worth it, because jQuery works with a real-life home, no one guarantees that the reactor will somehow change it slyly, and jQuery will not learn anything about it.

Where to get styles?
This is the usual DOM API, without the intervention of the reactor. I see two ways: draw an element with the appropriate one and take styles from it that were considered or climb into document.styleSheets, pull out the necessary fragment with styles from there and take from it. I used the first way, because it was easier for me, and for the task of the author this seems to be enough.

That is, window.getComputedStyle(DOM нода).getPropertyValue(имя свойства)

There is a nuance in this approach : you need to draw a list with properties after we have an element from which properties are taken - it exists. For this, the StyleExample component has a propertiesSource state, which changes after the first iteration of component rendering using componentDidMount , and a condition in the render method that does not draw the property list while it is not there yet.

How to work with DOM in a reactor?
In those cases when it is needed (and this is actually less common than it seems), refs are used.

 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> 

     {$('.'+{linkstyle}).css('color')} 
     {$('.'+linkstyle).css('color')}

    But generally it is a tin to do that.

    • so advise an alternative - Oloji
    • @Oloji, this is not enough code. - Qwertiy ♦
    • one
      @Oloji, you really shouldn't do this, because with jquery you work with a real house, and a real house can change with a reaction. So any ($) inside the reactant component is the sign “Stop! Think!”. And so, I am not very sure that I understand what you want, now I’ll go over the question - Duck Learns to Hide
    • @ Duck LEARNING, I can already see that it does not work. In fact, I need to display some of its properties by class name, when an element with such a class is not yet on the page - Oloji
    • @Oloji, some, which ones? Limited list? Among them can be calculated by the browser without your help at all? Recorded in your css? Recorded in style config for jsx element? - Duck Learns to Take Cover