web-dev-qa-db-ja.com

Reactからスタイルにアクセスする方法は？

React=でdivの幅と高さのスタイルにアクセスしようとしていますが、1つの問題に直面しています。これが今までに得たものです。

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


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

これは機能しますが、出力されるのはCSSStyleDeclarationオブジェクトであり、allプロパティではそのオブジェクトのすべてのCSSセレクターを使用できますが、いずれも設定されていません。それらはすべて空の文字列に設定されます。

これはCSSStyleDeclerationの出力です： http://Pastebin.com/wXRPxz5p

実際のスタイル（イベント継承スタイル）を確認するためのヘルプは大歓迎です！

ありがとう！

javascriptcssreactjsattributes
17
mre12345

For 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

編集：

特定のスタイル値を取得するため

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

React v> = 16

コールバックスタイルまたはcreateRef（）を使用してrefを割り当てます。

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);
}
25
Vikramaditya

ReactDOM.findDOMNodeは現在使用可能ですが、コールバックrefの代わりに非推奨になることに注意してください。

Dan Abramovによる投稿 こちら があります。これは、ReactDOM.findDOMNodeの使用をコールバック参照に置き換える方法の例を提供しながら、findDOMNodeを使用しない理由を概説しています。

SOを見たので、回答にリンクのみが含まれているとユーザーが動揺するので、ダンが親切に提供してくれた例の1つを渡します。

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>
    )
  }
}
4
flyingace

ReactDOM.findDOMNodeメソッドを使用して、そこから作業する必要があります。必要なことを行うコードは次のとおりです。

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

3
mtomic

React Refsおよび.getComputedStyleメソッドを使用してCSSプロパティ値を計算する例を次に示します。

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

スタイルを既に取得しています。CSSStyleDeclarationオブジェクトの小道具が空の文字列値を持っている理由は、内部スタイルへのリンクです。

以下のような変更を行った場合に何が起こるかを参照してください。

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

0
David Guan