使用React如何從另一個組件訪問組件的方法

我有一個組件，單擊按鈕時會打開一個模式，唯一需要的是我需要一個按鈕來觸發不同組件上的方法：使用React如何從另一個組件訪問組件的方法

var QueueReveal = React.createClass({ 
    getInitialState: function() { 
     return { clock: "0H 0M 0S" } 
    }, 
    componentDidMount: function(e) { 
     $(document).foundation(); 
    }, 
    enterQueue: function(e) { 
     $('#Queue').foundation('open'); 
     // Start Timer 
    }, 
    leaveQueue: function(e) { 
     $('#Queue').foundation('close'); 
     var data = { 
      msgType: "LeaveQueue", 
      data: {} 
     } 
     queueConn.send(JSON.stringify(data)); 
    }, 
    render: function() { 
     return (
      <div> 
       <h1 className="text-center">You Are Now In Queue</h1> 
       <p className="text-center"><small>You will be notified when a potential party has been found</small></p> 
       <span className="line-breaker"></span> 
       <br/> 
       <h1 className="text-center">{this.props.counter}</h1> 
       <br/> 
       <a className="alert button expanded" onClick={this.leaveQueue}>Leave Queue</a> 
      </div> 
     ) 
    } 
}); 

ReactDOM.render(<QueueReveal/>, document.getElementById('Queue')); 

var EnterQueueButton = React.createClass({ 
    render: function() { 
     return (
      <a href="#" id="enterQueueButton"><i className="fa fa-clock-o"></i> Enter Queue</a> 

      // I would like this link to trigger `QueueReveal.enterQueue` 
     ) 
    } 
}) 

ReactDOM.render(<EnterQueueButton/>, document.getElementById('EnterQueueButton'));

我想EnterQueueButton觸發QueueReveal.enterQueue點擊時，但我不完全確定如何去做這件事。

來源

2015-12-03 Datsik

可以肯定的是，它們是完全獨立的組件嗎？或者是在另一個內部渲染的？ – nbermudezs

如果它們是完全獨立的組件，我會做的是使組件擴展EventEmitter（類似this），並讓一個組件偵聽一個事件，然後另一個組件觸發它。

如果您可以重構代碼以使其中一個組件可以使用引用。您可以通過提供ref密鑰來指定組件的引用，然後通過this.refs.<the name you gate it>訪問它，這是一個反應組件，因此您可以調用任何您想要的組件。請參見this

來源

2015-12-03 03:08:52 nbermudezs

使用React如何從另一個組件訪問組件的方法

回答

相關問題