使用React,我如何访问组件's方法

With React how can I access a component's method from another component

本文关键字:组件 方法 访问 React 何访问 使用      更新时间:2023-09-26

我有一个组件,当点击一个按钮时,它会打开一个模态,唯一的问题是我需要一个按钮来触发不同组件上的方法:

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,但我不确定如何进行。

如果它们是完全独立的组件,我要做的是让组件扩展EventEmitter(类似这样的东西),让一个组件监听一个事件,然后另一个组件触发它。

如果您可以重构代码,使一个组件位于另一个组件中,则可以使用引用。您可以通过提供ref密钥为组件分配引用,然后通过this.refs.<the name you gate it>访问它,这是一个react组件,因此您可以调用其中的任何内容