- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我构建了一个大型应用程序,其中导航栏上的单个按钮打开一个模式。
我正在使用上下文 API 跟踪 modalOpen 状态。
因此,用户单击导航栏上的按钮。模态打开。 Modal 有一个名为 QuoteCalculator 的容器。
报价计算器如下所示:
class QuoteCalculator extends React.Component {
static contextType = ModalContext;
// ...
onSubmit = () => {
// ...
this.context.toggleModal();
this.props.history.push('/quote');
// ..
};
render() {
//...
return(<Question {...props} next={this.onSubmit} />;)
}
}
export default withRouter(QuoteCalculator);
现在,一切都按预期进行。当用户提交时,我会转到正确的路线。我只是在控制台上看到以下警告
index.js:1446 Warning: withRouter(QuoteCalculator): Function components do not support contextType.
我很想忽略这个警告,但我认为这不是一个好主意。
我尝试使用重定向。所以类似
QuoteCalculator looks as follows:
class QuoteCalculator extends React.Component {
static contextType = ModalContext;
// ...
onSubmit = () => {
// ...
this.context.toggleModal();
this.setState({done: true});
// ..
};
render() {
let toDisplay;
if(this.state.done) {
toDisplay = <Redirect to="/quote"/>
} else {
toDipslay = <Question {...props} next={this.onSubmit} />;
}
return(<>{toDisplay}</>)
}
}
export default QuoteCalculator;
这种方法的问题是我不断收到错误
You tried to redirect to the same route you're currently on
另外,我不想使用这种方法,因为那样我就必须撤消完成状态(否则当用户再次单击按钮时,完成为 true,我们将被重定向)...
知道withRouter和history.push发生了什么吗?
这是我的应用
class App extends Component {
render() {
return (
<Layout>
<Switch>
<Route path="/quote" component={Quote} />
<Route path="/pricing" component={Pricing} />
<Route path="/about" component={About} />
<Route path="/faq" component={FAQ} />
<Route path="/" exact component={Home} />
<Redirect to="/" />
</Switch>
</Layout>
);
}
}
最佳答案
与大多数高阶组件不同,withRouter
将您传递的组件包装在功能组件而不是类组件中。但它仍然在调用hoistStatics
,这将占用您的 contextType
static 并将其移动到 withRouter
返回的函数组件。这通常应该没问题,但您发现了一个情况并非如此。您可以查看仓库code了解更多详细信息,但它很短,所以我将在此处为您删除相关行:
function withRouter(Component) {
// this is a functional component
const C = props => {
const { wrappedComponentRef, ...remainingProps } = props;
return (
<Route
children={routeComponentProps => (
<Component
{...remainingProps}
{...routeComponentProps}
ref={wrappedComponentRef}
/>
)}
/>
);
};
// ...
// hoistStatics moves statics from Component to C
return hoistStatics(C, Component);
}
它确实不应该对任何事情产生负面影响。您的上下文仍然有效,只是在从 withRouter
返回的包装组件上被忽略。 。然而,改变一些东西来消除这个问题并不困难。
最简单
因为您的模态中需要的是 history.push
,您可以将其作为来自模式父组件的 prop 传递。鉴于您描述的设置,我猜测模式包含在应用程序中的一个位置,在组件树中相当高的位置。如果包含模态框的组件已经是 Route
组件,那么它就可以访问history
并且可以通过push
沿着模态。如果不是,则将父组件包装在 withRouter
中访问路由器 Prop 。
不错
您还可以使用ModalContext.Consumer
使模态组件成为模态内容/功能的简单包装器。组件将所需的上下文作为 props 向下传递,而不是使用 contextType
.
const Modal = () => (
<ModalContext.Consumer>
{value => <ModalContent {...value} />}
</ModalContext.Consumer>
)
class ModalContent extends React.Component {
onSubmit = () => {
// ...
this.props.toggleModal()
this.props.history.push('/quote')
// ..
}
// ...
}
关于reactjs - React Context API + withRouter - 我们可以一起使用它们吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53973720/
我完全是 React 的初学者,在练习时遇到了这个问题。 通过搜索,我发现'react-router-dom v6'不再支持'withRouter'。但我不知道如何将我的代码更改为与 v6 兼容。 有
我想导出组件 withRouter() 但我需要它没有默认的命名 export default withRouter(TopNav); 我试过了 export {TopNav} withRouter(
我想导出组件 withRouter() 但我需要它没有默认的命名 export default withRouter(TopNav); 我试过了 export {TopNav} withRouter(
我想访问应用程序导航上的匹配参数,我使用的是 react 和 react-router-dom。这是我制作的简单示例的代码片段,正如您在 Topics 组件上看到的那样,我在组件级别获得了正确的匹配,
我想在收到端点数据时触发状态更改,以便同步我的 GUI。 监听传入套接字数据的文件我们将调用sockets.js。在 sockets.js 内部我想调用路由转换。 if (data === 'game
我是 Reactjs 新手,我了解路由。这里我用了withRouter()以编程方式重定向。 我认为这个流程应该是:constructor->Willmount->render,但目前流程是const
我有一个当前用 withRouter 包装的组件(例如,我使用 export default withRouter(myComponent) ),因为我需要使用 history.push对于我在组件中
我目前正在使用 NodeJS 和 ReactJS 开发一个网络项目。我想在一个文件中包含两个组件,因为它们将使用相同的信息。其中一个组件使用 withRouter 来处理“this.props.his
我不想在某些路径上重新渲染我的组件,尝试使用 React.memo 并使用 withRouter HOC 检查当前路径。 React.memo 中的比较函数没有被调用。 function compar
我的动态路线有问题。它看起来像这样 [lang]/abc 我正在尝试从 [lang] 获取查询值但是当我使用 useRouter/withRouter我在页面的 2-3 渲染期间得到了查询(首先我得到
对于功能组件,我使用 withRouter 重定向到另一个组件,如下所示: const buttonClick = (history) => { history.push('/sp
我是 React 路由器的新手,遇到的困难很少。我在组件内使用历史没有问题。但是,我在上述组件之外有一个功能,它无法检测历史记录。我尝试了很多东西但无济于事。它给我一个 history is unde
我想知道在将用第 3 方 HOC 包装的组件上定义 propTypes 的最佳实践是什么,在本例中为 withRouter()来自 React-Router。 据我了解,propTypes 的目的是让
当我点击提交按钮时,我需要重定向到这个页面 pageOne,所以我用谷歌搜索并找到了一个 react 路由器并使用了这一行 this.props.history.push("/anotherPage"
我正在为我的项目使用 Redux 和 React。我在 App.js 中有一些路由。我也在我的项目中使用react-redux中的connect函数。为了防止更新阻塞问题,我通常以这种方式包装我的组件
当我使用 withRouter 时作为组件的装饰器,比如 @withRouter @observer // observer is mobx decorator export default clas
我正在尝试在 React+Typescript 中获得更深入的知识和实践,并且在使用 withRouter 时遇到了这个打字错误。来自 react-router-dom . 我的代码片段非常简单,我试
在 npm i --save react-router-dom 和 npm install --save with-router 之后我试着写 import {withRouter} from 're
我只是尝试像这样将 forwardRef 与 withRouter(mycomponent) 一起使用: export default function App() { const childRe
我构建了一个大型应用程序,其中导航栏上的单个按钮打开一个模式。 我正在使用上下文 API 跟踪 modalOpen 状态。 因此,用户单击导航栏上的按钮。模态打开。 Modal 有一个名为 Quote
我是一名优秀的程序员,十分优秀!