コンポーネントを作成するための参照の取り付け方法

Question

現在、次の方法でrefを使用して子コンポーネント関数を取得しようとしていますが、詳細は表示されません。

class ChildCompent extends React.Component { 
    constructor(props){ 
    super(props); 
    } 

    _function1 =()=>{ 
    /* ...... */ 
    } 

    _function1 =()=>{ 
    /* ...... */ 
    } 
    render(){ 
    return (
     <div> 
      ChildComponent 
     </div> 
    ) 
    } 
} 

let ComposedChild = compose(
    /* --- graphql query */ 
)(ChildComponent); 



class ParentComponent extends React.Component { 
    constructor(props){ 
    super(props); 
    } 

    _onClick =()=>{ 
     console.log(this.refs.childComponent) 
     // doesn't show the _function1 and _function2 
    } 

    render(){ 
     return (
      <div onClick={this._onClick}> 
       <div>Testing</div> 
       <ChildComponent ref="childComponent"/>  
      </div>   
    ) 
    } 
} 

Answer 1

あなたはこの回答を参照してくださいコンポーネント に参照を設定するために、REFコールバックを利用する必要があります：あなたはthis.childComponent._function1()

のようにそれを行うことができます別のコンポーネントの機能にアクセスするために、その後

How to access a DOM element in React? What is the equilvalent of document.getElementById() in React

を

また、ParentComponentのcompose関数でラップした後に返されるコンポーネントを使用する必要があります。

class ChildComponent extends React.Component { 
    constructor(props){ 
    super(props); 
    } 

    _function1 =()=>{ 
    /* ...... */ 
    console.log('hello'); 
    } 


    render(){ 
    return (
     <div> 
      ChildComponent 
     </div> 
    ) 
    } 
} 

let ComposedChild = compose(
     /* --- graphql query */ 
)(ChildComponent); 



class ParentComponent extends React.Component { 
    constructor(props){ 
    super(props); 
    } 

    _onClick =()=>{ 
     this.childComponent._function1() 
     // doesn't show the _function1 and _function2 
    } 

    render(){ 
     return (
      <div onClick={this._onClick}> 
       <div>Testing</div> 
       <ComposedChild ref={(ref) => this.childComponent = ref}/>  
      </div>   
    ) 
    } 
}