使用React如何从另一个组件访问组件的方法

I have a component that when a button is clicked it opens up a modal, the only thing is I need a button to trigger a method on a different component:

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

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'));

I would like EnterQueueButton to trigger QueueReveal.enterQueue when clicked but I'm not exactly sure how to go about this.

我希望EnterQueueButton在点击时触发QueueReveal.enterQueue,但我不确定如何解决这个问题。

1 个解决方案

#1

If they are completely independent components what I'd do is to make the components extend EventEmitter (something like this) and make one component listen for an event and then the other component trigger it.

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

If you can refactor the code to have one component inside the other you can use references. You can assign a reference to a component by providing the ref key and then access it by this.refs.<the name you gate it>, this is a react component so you can call whatever you want in it. See this

如果您可以重构代码以将一个组件放在另一个组件中,则可以使用引用。您可以通过提供ref键来分配对组件的引用,然后通过this.refs。 <您为其命名的名称> 访问它,这是一个反应组件,因此您可以在其中调用任何您想要的内容。看到这个