Question

我有一个 ReactJS 网络应用，它必须在开始加载时启动一些数据（在浏览器中输入Url后）。例如，我的网络应用程序调用API来检查令牌是否有效，加载配置文件信息......我想在此时显示加载页面，直到初始过程完成。

怎么做？

我在项目中使用 react router v4 。

初始过程只发生一次，直到用户在浏览器中关闭我的应用的标签。

我的网络应用有多条路线。这意味着我的应用程序有很多页面。用户在浏览器Url中输入任何路径后，必须始终运行初始值。例如我的应用程序有这样的路线：

<route path="/about" component={about}>
<route path="/admin" component={admin}>
<route path="/dashboard" component={dashboard}>

当用户在浏览器中输入http://localhost:3000/about或http://localhost:3000/admin或localhost:3000/dashboard时，我的应用必须初始化数据并显示加载页面，当init完成我的应用渲染相应的页面时。< / p>

更新要清楚问题：

我的问题的解决方案可以是：

变量标记启动正在运行或启动已完成
在每个页面中，我检查上面提到的变量并渲染加载或相应页面的内容。

但是这个解决方案存在问题，即代码执行数据的位置是什么？您知道用户可以输入任何页面URL来访问我的Web应用程序，这样我就必须将执行init的代码添加到我的Web应用程序的每个页面。这是不好的方法，因为代码重复。

所以我希望有一个组件可以进行数据初始化并渲染加载直到完成。在启动完成后，它呈现相应的页面取决于url。如何使用React router v4实现它？

Answer 1

您可以使用条件渲染。

在数据加载完成后，在componentWillMount或componentDidMount和setState启动数据加载。然后根据状态的状态在render方法中应用条件渲染。

您可以从此代码段中获取帮助：

constructor(props){
  this.state = {status: null}
}

componentWillMount(){
  function_initiateDataLoading((data)=>{
    this.setState({status: data})
  })
}

render(){
  return this.tate.status == null ? <LoadingComponent/> : <FinalComponent/>
}

如何在ReactJS Web应用程序中加载屏幕，如React Native中的splash

1 个答案: