web-dev-qa-db-ja.com

React、同じコンポーネントからレンダリング関数のDOM要素にアクセスする方法

同じコンポーネントからレンダリング関数内のDOM要素にアクセスするためのベストプラクティスは何だろうと思っています。このコンポーネントをページ上で複数回レンダリングすることに注意してください。

例えば.

var TodoItem = React.createClass({
    ...
    render:function(){

        function oneSecLater(){
            setTimeout(function(){
            //select the current className? this doesn't work, but it gives you an idea what I want.
            document.getElementsByClassName('name').style.backgroundColor = "red";
                )}, 1000);
        }

        return(
            <div className='name'>{this.oneSecLater}</div>
        )



})
javascriptcssreactjsjsx
22
wonghenry

ここでは、setTimeoutを使用する必要はありません。コンポーネントにはライフサイクルメソッドがあり、componentDidMountはレンダリング後に呼び出されます。そのため、メソッドでdivへの参照を取得できます。

var TodoItem = React.createClass({
  ...
  componentDidMount: function () {
     if(this.myDiv) {
        this.myDiv.style.backgroundColor = "red";
     }
  }
  render:function(){
    return(
        <div className='name' ref = {c => this.myDiv = c}></div>
    );
});
15
Saba Hassan

ReactDOM.findDOMNode(this) を使用して、基礎となるDOMノードにアクセスできます。ただし、DOMノードにアクセスして操作を行うのは、Reactスタイルのプログラミングに反します。状態変数を使用し、setStateメソッドを呼び出してDOMを再レンダリングすることをお勧めします。

22
VJAI

ref callbackを使用して、reactでdom要素にアクセスできます。これは、React Docsが推奨するものです

dOMが作成される前にrefにアクセスできないため、componentDidMountライフサイクル関数でそれを行います

var TodoItem = React.createClass({
    ...
    componentDidMount() {
          setTimeout(function(){
               this.myDiv.style.backgroundColor = "red";
          )}, 1000);
    }
    render:function(){

        return(
            <div className='name' ref={(ele) => this.myDiv = ele}></div>
        )

})

DOCS

2
Shubham Khatri

ここに私の解決策があります：特定の要素のcomputeCssを取得するには、最初にelemenetにref属性を追加する必要があります。

ここに画像の説明を入力

render(){
  <div>
    <Row className="chartline2">
      <Col className="Gutter-row" span={24}>
        <div className="Gutter-box lineChartWrap" id="lineChartWrap" ref="lineChartWrap">
            <LineChart data={lineChartData} options={lineChartOptions} width="100%" height="300"/>
        </div>
      </Col>
    </Row>
  </div>
}

次に、componentDidUpdate（）関数で、window.getComputedStyle（this.refs.lineChartWrap）.XXXを使用して要素のcssを取得します ここに画像の説明を入力してください

        componentDidUpdate(){
                console.log("-------  get width ---");
                let ele = document.querySelector("#lineCharWrap");
                console.log(this.refs.lineChartWrap);
                console.log(window.getComputedStyle(this.refs.lineChartWrap).width);
        }
0
juana pu

DOM要素へのアクセスは避けるべきです。なぜなら、反応の全体のポイントはdomを抽象化するからです。 Reactは、VirtualDomと呼ばれるDOMの表現をメモリに保持します。 VirtualDomを使用すると、アプリケーションのユニットテストが簡単になります。実行していることが本当にわかっている場合は、次のようにします。

componentDidMount(){
const name=this.name.current.style() //current will return the actual DOM 
element
}
name=React.createRef()  //create a ref object

<div ref={this.name} className="anything" /> //your classname does not need to be named as "name". You access the element via the "ref" attribute not the classname.

ComponentDidMountでは、コンポーネントがマウントされると、スタイルの変更が適用されます。

0
Yilmaz

React 14.でストライプチェックアウトモーダルを開く前にフォームの検証を試みた後、これに遭遇しました。

参照を使用して実際にDOM要素にアクセスしているわけではないことに注意してください。単にReactコンポーネントオブジェクトにアクセスしています。ここに示す：

enter image description here

一番上はref.ticketFormを呼び出し、一番下はdocument.getElementById('ticketform')を示しています。

これを行う必要がある理由は次のとおりです。

<Button color="success" size="lg" type="button" onClick={(e) => {
  const ticketForm = document.getElementById('ticketForm');
  const isValid = ticketForm.reportValidity();
  if (!isValid) e.stopPropagation();
}}>Buy Tickets</Button>

reportValidity()はDOM要素のメソッドです。 https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity

この問題を参照して、この人はこのメソッドが参照オブジェクトで使用されていることを示しましたが、これは当然正しくありません： https://github.com/azmenak/react-stripe-checkout/issues/121#issuecomment-431635855

これにより、DOM要素がReactコンポーネントと明示的に等しくないことが明確になります。何らかの方法でDOMを操作する必要がある場合は、まず反応的な方法で操作してください。これは、非常に重いカスタム検証を手動で行うよりも、動的フォームのフォーム検証に依存するEdgeの場合です。

0
Dark Swordsman