web-dev-qa-db-fra.com

Comment accéder aux styles de React?

J'essaie d'accéder aux styles width et height d'une div dans React mais je rencontre un problème. C'est ce que j'ai eu jusqu'à présent: 

componentDidMount()  {
  console.log(this.refs.container.style);     
}


render()  {
   return (
      <div ref={"container"} className={"container"}></div>  //set reff
   );
}

Cela fonctionne, mais le résultat obtenu est un objet CSSStyleDeclaration et, dans la propriété all, tous les sélecteurs CSS pour cet objet, mais aucun d’eux n’est défini. Ils sont tous définis sur une chaîne vide. 

Voici le résultat de CSSStyleDecleration: http://Pastebin.com/wXRPxz5p

Toute aide pour connaître les styles actuels (ceux hérités de l'événement) serait grandement appréciée!

Merci!

javascriptcssreactjsattributes
9
mre12345

Pour React v <= 15

console.log( ReactDOM.findDOMNode(this.refs.container).style); //React v > 0.14

console.log( React.findDOMNode(this.refs.container).style);//React v <= 0.13.3

MODIFIER:

Pour obtenir la valeur de style spécifique

console.log(window.getComputedStyle(ReactDOM.findDOMNode(this.refs.container)).getPropertyValue("border-radius"));// border-radius can be replaced with any other style attributes;

Pour React v> = 16

assignez ref en utilisant le style de rappel ou en utilisant createRef ().

assignRef = element => {
  this.container = element;
}
getStyle = () => {

  const styles = this.container.style;
  console.log(styles);
  // for getting computed styles
  const computed = window.getComputedStyle(this.container).getPropertyValue("border-radius"));// border-radius can be replaced with any other style attributes;
  console.log(computed);
}
19
Vikramaditya

Vous devriez utiliser la méthode ReactDOM.findDOMNode et travailler à partir de là. Voici le code qui fait ce dont vous avez besoin. 

var Hello = React.createClass({

componentDidMount: function() {
  var elem = ReactDOM.findDOMNode(this.refs.container);
  console.log(elem.offsetWidth, elem.offsetHeight);    
},

render: function() {
   return (
      <div ref={"container"} className={"container"}>
        Hello world
      </div>
   );
}
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

jsFiddle

2
mtomic

Il est à noter que, bien que ReactDOM.findDOMNode soit utilisable aujourd'hui, il sera obsolète à l'avenir à la place des références de rappel.

Il existe un article ici de Dan Abramov qui explique les raisons pour lesquelles vous n’utilisez pas findDOMNode tout en fournissant des exemples de remplacement de l’utilisation de ReactDOM.findDOMNode par des références de rappel.

Depuis que j'ai vu SO des utilisateurs s'énerver quand seulement un lien était inclus dans une réponse, je vais donc vous donner l'un des exemples que Dan a aimablement fourni:

findDOMNode (stringDOMRef)

**Before:**

class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this.refs.something).scrollIntoView();
  }

  render() {
    return (
      <div>
        <div ref='something' />
      </div>
    )
  }
}
**After:**

class MyComponent extends Component {
  componentDidMount() {
    this.something.scrollIntoView();
  }

  render() {
    return (
      <div>
        <div ref={node => this.something = node} />
      </div>
    )
  }
}
2
flyingace

Vous avez déjà le style. La raison pour laquelle les propriétés de l'objet CSSStyleDeclaration ont une telle valeur de chaîne vide est son lien avec le style interne.

Voyez ce qui se passera si vous faites un changement comme ci-dessous:

<div ref={"container"} className={"container"} style={{ width: 100 }}></div>

0
David Guan