跳到主要内容

如何使用React创建仪表板应用程序

11.显示进度条

NumberWidget.js有几种方法可以帮助我们在特定条件下渲染事物。我们可以在render方法中调用它们,它们可以返回我们需要输出的内容。

ShowProgress()添加一些代码,如果我们应该渲染进度条。我们至少需要一个最小值,最大值和一个值。

if(this.props.min!== undefined && this.props.max!== undefined && this.props.value!== undefined){return  ; } return null;

12.添加Container组件

手动添加数据对我们没有多大帮助。我们可以添加一个容器NumberWidget这将从我们的服务器提供新的数据。在App.js中,将我们在步骤10中添加的内容替换为NumberWidgetContainer并传递一个URL来加载数据。

从../components/NumberWidgetContainer'导入NumberWidgetContainer; [...] 

13.在加载时获取数据

在其生命周期中,React组件将根据它所处的位置调用许多不同的方法。该ComponentDidMount当组件首次渲染时,将调用该方法,这使其成为获取数据的理想位置。

添加以下内容ComponentDidMountNumberWidgetContainer.js。这会打电话给FetchData方法现在和之后的每一分钟。我们将修复类型错误在下一步。

this.getData()。then(_ => {this.interval = setInterval(this.getData,60000);});

14.更新州

每个组件都可以拥有自己的内部状态,在任何给定时刻都可以保存有关自身的信息。我们可以将此状态作为其他组件使用的道具。

向提供的请求发出请求HREF使用AJAX模块Axios支持URL,并使用提供的值更新状态。这些将自动传递给NumberWidget,然后将更新自己。

this.setState({loading:true}); return axios.get(this.props.href).then(resp => {this.setState({loading:false,min:resp.data.min,max:resp.data.max,value:resp.data.value });})

15.添加List小部件

我们所做的基础工作NumberWidget也可以应用于其他类型的小部件。ListWidgetContainer可以传递相同的道具NumberWidgetContainer,但会渲染一个值列表。

进口ListWidgetContainer与其余部分一起,将组件放在上面NumberWidgetContainer在render方法中。

从'../components/NumberWidgetContainer'导入NumberWidgetContainer; [...] 

16.显示列表项

随着提供的数据SortedItems变量作为数组,我们可以迭代结果并为每个结果渲染一个单独的组件。

为此,我们可以在数组原型上使用'map'方法。这将创建React将呈现的新组件数组。在 - 的里面ListDisplay组件ShowWidget,添加map函数以创建新的ListItems中

{sortedItems.map((item,index)=>  )}

17.按值对数据排序

react dashboard app

使用排序功能为用户提供有用的信息

我们应该避免依赖在源处排序的数据来确保我们向用户提供有用的信息。我们可以使用排序功能在里面执行此操作SortListItems方法。

数组排序函数采用两个值并进行比较。将此应用于SortedItems并返回它以降序排序其内容。

return sortedItems.sort((a,b)=> {if(a.value> b.value){return -1;} else if(a.value <b.value){return 1;} return 0;}) ;

18.添加Graph小部件

图形小部件可以显示比数字或列表小部件更清晰的大型数据集。它使用一个名为Chart.js的库和一个React包装器,它随着props更改而更新。

切换回App.js,导入GraphWidgetContainer并将其添加到现有小部件下的render函数中。

从'../components/GraphWidgetContainer'导入GraphWidgetContainer; [...] 

19.准备要显示的数据

Chart.js以特定格式获取数据。在这种情况下,'datasets'数组是用于绘制线的点的集合。我们将使用state来保存Chart.js的所有配置数据,并使用从URL获取的数据集更新它,这些数据集以不同的格式到达。

打开GraphWidget.js并循环在道具上GenerateDatasets更新状态。

props.data.forEach(function(data){datasets.push({label:data.label,data:data.data,fill:false,borderColor:data.color,pointRadius:0,pointHitRadius:10});},这个);

20.道具改变时重新生成

Chart.js的React包装器会在其props更改时更新,但是当状态保持设置时,我们不会直接更新这些值。

ComponentWillReceiveProps是另一个生命周期方法,当组件的props更新时将触发该方法。有时,这可以在值未更改时触发,但快速检查可以防止不必要的更新。

if(this.props.data!== nextProps.data){this.generateDatasets(nextProps); }

21.添加剩余的小部件

最后,剩下要做的就是添加更多数据。凭借我们从各种小部件创建的灵活性,我们可以添加任何必要的小部件。

填写页面上的剩余空白。使用类型,行和列跨度以及小部件的位置来最好地适应数据。

  

本文最初出现在Web Designer杂志上。在这里订阅。

为了进一步提高您的网页设计技能,请前往我们的会议生成并体验行业领先的演讲者,研讨会和宝贵的交流机会。不要错过!立即获取您的Generate门票

相关文章:



翻译字数超限