我是ReactJS和React-Router的新手。我有一个组件,通过props <Link/>
从react-router接收一个对象。每当用户单击该组件内部的“下一步”按钮时,我都想<Link/>
手动调用对象。
现在,我正在使用refs访问支持实例,并手动单击<Link/>
生成的'a'标记。
问题:有没有办法手动调用链接(例如this.props.next.go
)?
这是我目前的代码:
//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />
//in Document.js
...
var Document = React.createClass({
_onClickNext: function() {
var next = this.refs.next.getDOMNode();
next.querySelectorAll('a').item(0).click(); //this sounds like hack to me
},
render: function() {
return (
...
<div ref="next">{this.props.next} <img src="rightArrow.png" onClick={this._onClickNext}/></div>
...
);
}
});
...
这是我想要的代码:
//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />
//in Document.js
...
var Document = React.createClass({
render: function() {
return (
...
<div onClick={this.props.next.go}>{this.props.next.label} <img src="rightArrow.png" /> </div>
...
);
}
});
...
在5.x版中,您可以使用以下
useHistory
钩子react-router-dom
: