webentwicklung-frage-antwort-db.com.de

Zugriff auf Stile von React

Ich versuche, auf die Breiten- und Höhenstile eines div in React zuzugreifen, aber ich bin auf ein Problem gestoßen. Das habe ich bisher bekommen: 

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


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

Dies funktioniert, aber die Ausgabe, die ich bekomme, ist ein CSSStyleDeclaration-Objekt. In der all -Eigenschaft kann ich alle CSS-Selektoren für dieses Objekt auswählen, aber sie werden nicht gesetzt. Sie sind alle auf eine leere Zeichenfolge gesetzt. 

Dies ist die Ausgabe der CSSStyleDecleration: http://Pastebin.com/wXRPxz5p

Jede Hilfe, um die aktuellen Stile (event inherrited) zu sehen, wäre sehr dankbar!

Vielen Dank!

9
mre12345

Für Reaktion 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

BEARBEITEN:

Um den spezifischen Stilwert zu erhalten

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

Für Reaktion v> = 16

weisen Sie ref mit dem Callback-Style oder mit createRef () zu.

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

Sie sollten die ReactDOM.findDOMNode-Methode verwenden und von dort aus arbeiten. Hier ist der Code, der das tut, was Sie brauchen. 

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

Es ist erwähnenswert, dass ReactDOM.findDOMNode heute zwar verwendbar ist, jedoch zukünftig anstelle von Rückrufverweisen nicht mehr empfohlen wird.

Es gibt einen Beitrag hier von Dan Abramov, in dem die Gründe aufgeführt werden, warum findDOMNode nicht verwendet wird, während Beispiele angegeben werden, wie die Verwendung von ReactDOM.findDOMNode durch Callback-Refs ersetzt wird.

Seit ich gesehen habe, dass SO Benutzer verärgert sind, als nur eine Verknüpfung in einer Antwort enthalten war, werde ich eines der Beispiele weitergeben, die Dan freundlicherweise zur Verfügung gestellt hat:

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

Hier ist ein Beispiel für die Berechnung des CSS-Eigenschaftswerts über React Refs und .getComputedStyle Methode:

class App extends React.Component {
    constructor(props) {
        super(props)
        this.divRef = React.createRef()
    }

    componentDidMount() {
        const styles = getComputedStyle(this.divRef.current)

        console.log(styles.color) // rgb(0, 0, 0)
        console.log(styles.width) // 976px
    }

    render() {
        return <div ref={this.divRef}>Some Text</div>
    }
}
0
Purkhalo Alex

Sie erhalten bereits den Stil. Der Grund, warum die Requisiten des CSSStyleDeclaration-Objekts so viele leere Zeichenfolgenwerte haben, ist die Verknüpfung mit dem inneren Stil.

Sehen Sie, was passiert, wenn Sie wie folgt Änderungen vornehmen:

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

0
David Guan