如何在反应路由中设置延迟功能?
[英] How can i set delay function in react routing?
本文介绍了如何在反应路由中设置延迟功能?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在 React.js 上设置延迟功能?有没有办法在反应路由中添加或删除类，以便页面可以转换?添加、删除或切换类应该每次都有效.是否可以在具有延迟功能的路由上添加、删除或切换类?或者我可以为此使用第三方库吗?
import React from "react";import { BrowserRouter as Router, Route, Link } from react-router-dom";const BasicExample = () =>(<路由器><div><ul><li><链接到=/">主页</链接><li><链接到=/关于">关于</链接><li><Link to="/topics">Topics</Link><小时/><路由精确路径=/";组件={Home}/><路线路径=/about";组件={关于}/><路由路径="/topics";组件={主题}/>
</路由器>);const Home = () =>(<div><h2>家</h2>
);const 关于 = () =>(<div><h2>关于</h2>
);const 主题 = ({ 匹配 }) =>(<div><h2>主题</h2><ul><li><Link to={`${match.url}/rendering`}>使用 React 渲染</Link><li><Link to={`${match.url}/components`}>组件</Link><li><Link to={`${match.url}/props-v-state`}>Props v. State</Link><路由路径={`${match.url}/:topicId`} component={Topic}/><路线精确的路径={match.url}渲染={() =><h3>请选择一个主题.</h3>}/>
);const 主题 = ({ 匹配 }) =>(<div><h3>{match.params.topicId}</h3>
);导出默认的 BasicExample；
解决方案
https://gist.github.com/headzoo/8f4c6a5e843ec26abdcad87cd93e3e2e
从'react'导入React；从 'prop-types' 导入 PropTypes；从'react-router-dom'导入{链接}；/*** 包装 React Router Link 组件并在点击链接后创建延迟.*/导出默认类 DelayLink 扩展 React.Component {静态 propTypes = {/*** 在注册点击之前等待的毫秒数.*/延迟:PropTypes.number，/*** 在点击链接之后和延迟计时器开始之前调用.*/onDelayStart: PropTypes.func,/*** 在延迟计时器结束后调用.*/onDelayEnd: PropTypes.func};静态默认道具 = {延迟:0，onDelayStart: () =>{}，onDelayEnd: () =>{}};静态 contextTypes = Link.contextTypes;构造函数(道具){超级(道具)；this.timeout = null;}componentWillUnmount() {如果(这个.超时){clearTimeout(this.timeout);}}/*** 点击链接时调用** @param {事件} e*/handleClick = (e) =>{const { 替换，到，延迟，onDelayStart，onDelayEnd } = this.props;const { 历史} = this.context.router;onDelayStart(e, to);如果(e.defaultPrevented){返回;}e.preventDefault();this.timeout = setTimeout(() => {如果(替换){history.replace(to);} 别的 {历史推(到)；}onDelayEnd(e, to);}， 延迟);};使成为() {const props = Object.assign({}, this.props);删除 props.delay;删除 props.onDelayStart;删除 props.onDelayEnd;返回 (<Link {...props} onClick={this.handleClick}/>);}}
How can I set a delay function on React.js? Is there any way to add or remove class in react routing so that page could be transition? Add, remove or toggle class should work every time. Is it possible to add, remove or toggle class on routing with a delay function? or can I use a third party library for that?
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const BasicExample = () => (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);
const Home = () => (
<div>
<h2>Home</h2>
</div>
);
const About = () => (
<div>
<h2>About</h2>
</div>
);
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/rendering`}>Rendering with React</Link>
</li>
<li>
<Link to={`${match.url}/components`}>Components</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>Props v. State</Link>
</li>
</ul>
<Route path={`${match.url}/:topicId`} component={Topic} />
<Route
exact
path={match.url}
render={() => <h3>Please select a topic.</h3>}
/>
</div>
);
const Topic = ({ match }) => (
<div>
<h3>{match.params.topicId}</h3>
</div>
);
export default BasicExample;
解决方案
https://gist.github.com/headzoo/8f4c6a5e843ec26abdcad87cd93e3e2e
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
/**
* Wraps the React Router Link component and creates a delay after the link is clicked.
*/
export default class DelayLink extends React.Component {
static propTypes = {
/**
* Milliseconds to wait before registering the click.
*/
delay: PropTypes.number,
/**
* Called after the link is clicked and before the delay timer starts.
*/
onDelayStart: PropTypes.func,
/**
* Called after the delay timer ends.
*/
onDelayEnd: PropTypes.func
};
static defaultProps = {
delay: 0,
onDelayStart: () => {},
onDelayEnd: () => {}
};
static contextTypes = Link.contextTypes;
constructor(props) {
super(props);
this.timeout = null;
}
componentWillUnmount() {
if (this.timeout) {
clearTimeout(this.timeout);
}
}
/**
* Called when the link is clicked
*
* @param {Event} e
*/
handleClick = (e) => {
const { replace, to, delay, onDelayStart, onDelayEnd } = this.props;
const { history } = this.context.router;
onDelayStart(e, to);
if (e.defaultPrevented) {
return;
}
e.preventDefault();
this.timeout = setTimeout(() => {
if (replace) {
history.replace(to);
} else {
history.push(to);
}
onDelayEnd(e, to);
}, delay);
};
render() {
const props = Object.assign({}, this.props);
delete props.delay;
delete props.onDelayStart;
delete props.onDelayEnd;
return (
<Link {...props} onClick={this.handleClick} />
);
}
}
这篇关于如何在反应路由中设置延迟功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
