使用包装的组件实现错误边界

时间:2020-06-28 01:03:28

标签: javascript reactjs react-router-dom higher-order-components react-error-boundary

我正在使用<label ng-click="clearAll()" ng-repeat="x in categories"> <input type="radio" id="optradio" ng-model="searchCategory.Category" name="optradio" ng-value="{{x}}" ng-checked="$first"> <p>{{x}}</p> </label> 并将每个组件包装在HOC react-router-dom中,以确保在渲染之前进行身份验证。但是,我现在想实现错误边界,而且我不知道如何协调两者。这是我当前的auth组件的设置方式:

App

在我使用export default class App extends Component { render() { return ( <Switch> <Route path='/' render={() => ( <React.Fragment> <main> <Route path='/download' component={auth(Downloads)} /> </main> </React.Fragment> )} /> </Switch> 的情况下,这就是我认为实现错误边界最有意义的方式,以及我想要错误边界包装器的方式。

react-router-dom

在使用<Switch> <Route path='/download' render={ <ErrorBoundary> <Downloads> </ErrorBoundary> } </Route> </Switch> 而不是auth道具的同时,我只是不知道维持render HOC用法的语法。如果有更好的方法将所有这些结构在一起,那也可以。

0 个答案:

没有答案