我是ReactJS和React-Router的新手。我有一个组件,通过props <Link/>从 react-router 接收一个对象。每当用户单击该组件内部的“下一步”按钮时,我都希望<Link/>手动调用对象。
<Link/>
现在,我正在使用 refs 访问 支持实例, 并手动单击<Link/>生成的’a’标记。
问题: 有没有办法手动调用链接(例如this.props.next.go)?
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> ... ); } }); ...
v4推荐的方法是允许您的render方法捕获重定向。使用state或props确定是否需要显示重定向组件(然后触发重定向)。
import { Redirect } from 'react-router'; // ... your class implementation handleOnClick = () => { // some action... // then redirect this.setState({redirect: true}); } render() { if (this.state.redirect) { return <Redirect push to="/sample" />; } return <button onClick={this.handleOnClick} type="button">Button</button>; }
参考:https : //reacttraining.com/react- router/web/api/Redirect
您还可以利用Router暴露给React组件的上下文。
Router
static contextTypes = { router: PropTypes.shape({ history: PropTypes.shape({ push: PropTypes.func.isRequired, replace: PropTypes.func.isRequired }).isRequired, staticContext: PropTypes.object }).isRequired }; handleOnClick = () => { this.context.router.push('/sample'); }
这就是<Redirect />引擎盖下的工作方式。
<Redirect />
参考:https : //github.com/ReactTraining/react-router/blob/master/packages/react- router/modules/Redirect.js#L46,L60
如果仍然需要执行与v2的实现类似的操作,则可以创建的副本,BrowserRouter然后将暴露history为可导出常量。以下是一个基本示例,但是您可以根据需要将其组合为可自定义的道具。有一些关于生命周期的警告,但就像在v2中一样,它应始终重新渲染路由器。这对于从动作功能发出API请求后的重定向很有用。
BrowserRouter
history
// browser router file... import createHistory from 'history/createBrowserHistory'; import { Router } from 'react-router'; export const history = createHistory(); export default class BrowserRouter extends Component { render() { return <Router history={history} children={this.props.children} /> } } // your main file... import BrowserRouter from './relative/path/to/BrowserRouter'; import { render } from 'react-dom'; render( <BrowserRouter> <App/> </BrowserRouter> ); // some file... where you don't have React instance references import { history } from './relative/path/to/BrowserRouter'; history.push('/sample');
最新BrowserRouter扩展:https : //github.com/ReactTraining/react-router/blob/master/packages/react-router- dom/modules/BrowserRouter.js
将新状态推送到browserHistory实例:
browserHistory
import {browserHistory} from 'react-router'; // ... browserHistory.push('/sample');
参考:https : //github.com/reactjs/react- router/blob/master/docs/guides/NavigatingOutsideOfComponents.md