コンポーネント内の関数にアクセスしますか？

Question

私はnoobです、そして現在reactjsを学んでいる人は、componentの内部にあるcomponentの中の機能にアクセスする方法を説明することができますreactjs？

例：このような

class ComponentOne extends React.Component{ 
    constructor(){ 
     super() 
     this.handleClick=this.handleClick.bind(this) 
    } 

    handleClick(){ 
     console.log("handling click") 
    } 

    render(){ 
     return(
      <button onClick={this.handleClick}>Click me</button> 
     ) 
    } 
} 

// This component is in another file 

import ComponentOne from './ComponentOne' 

class ComponentTwo extends React.Component{ 
    constructor(){ 
     super() 
     this.handleComp=this.handleComp.bind(this) 
    } 

    handleComp(){ 
     ComponentOne.handleClick() 
    } 

    render(){ 
     return(
      <button onClick={this.handleComp}>Click me</button> 
     ) 

    } 
} 

何か。

Answer 1

通常、反応しているときに、他のコンポーネントの中で関数を実行したいときyou use a ref。

私はVideoPlayerコンポーネントを持っている明示的な使用例がありました。プレーヤー（コンポーネント外）で再生または一時停止機能を実行したいのですが、VideoPlayerの再生機能を呼び出して州と他のすべて。それは非常に強力なことができます！

class ParentComponent extends React.Component { 
    handleClick = (e) => { 
     e.preventDefault(); 
     this.childComponentRef && this.childComponentRef.someFunc(); 
    } 
    assignChildComponentRef = target => this.childComponentRef = target; 
    render() { 
     retrurn (<div> 
      <button onClick={this.handleClick}>trigger child function click</button> 
      <ChildComponent ref={this.assignChildComponentRef} prop1={this.something} /> 
     </div>); 
    } 
} 

// child component implementation 
class ChildComponent extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { value: 0 }; 
    } 
    someFunc =() => { 
     this.setState({ value: this.state.value + 1 }); 
    } 
    render() { 
     return <div>{this.state.value}</div> 
    } 
} 

ここで注意することはほとんどありません。

1. 文字列リファレンスを使用する例がたくさんあります。 This is now considered a bad practice and will be removed in later versions.
2. 絶対に必要な場合にのみ参照を使用します。ただし、コンポーネントへの参照が必要な場合は、参照を行うことが意図された方法です。