我正在构建一个React应用程序,该应用程序将从几个不同位置的温度传感器获取大量数据,并使用chart.js显示数据。
我已经制作了一个组件,可以从一个地方获取数据,并且可以从App.js中调用该组件,所以现在,如果我以这种方式实现它,则可以复制该组件或从另一个地方获取数据。
下一步是找到一种方法来浏览这些组件。我不知道该用什么或如何解决这个问题,所以我正在寻找有关解决方法的想法。
我尝试使用 react-swipeable-views 。这篇文章中提供了代码。这似乎是一个简单的解决方案,但是我不确定这样做是否是个好主意。我想使用大数据集会很繁重吗?如果我了解React的工作方式,它将把所有组件中的数据提取到浏览器中,然后将其隐藏直到显示出来?
我也看了这篇文章:https://coursework.vschool.io/react-transitions-with-react-transition-group/ 这里使用了 react-transition-group ,但是我不确定如何在此处实现滑动部分,因为本文没有对此进行讨论。
关于如何解决此问题的任何想法?
import React, {Component} from 'react';
import Test from './Test';
import SwipeableViews from 'react-swipeable-views';
const styles = {
slide: {
padding: 15,
minHeight: 800,
color: '#fff',
},
slide1: {
background: '#FEA900',
},
slide2: {
background: '#B3DC4A',
},
slide3: {
background: '#6AC0FF',
},
};
class App extends React.Component{
constructor(){
super();
this.state={
foo: 'bar'
}
}
}
render(){
return(
<div className="App">
<SwipeableViews enableMouseEvents>
<div style={Object.assign({}, styles.slide, styles.slide1)}>
slide n°1
<Test /> // <-- This would be a component with large data sets
</div>
<div style={Object.assign({}, styles.slide, styles.slide2)}>
slide n°2
</div>
<div style={Object.assign({}, styles.slide, styles.slide3)}>
slide n°3
</div>
</SwipeableViews>
</div>
)
}
export default App;
答案 0 :(得分:0)
我以前没有使用过它,但是在看文档时,使用react-swipeable-views应该没问题,因为它“快速呈现第一张幻灯片,然后延迟加载其他幻灯片”。 (来自https://github.com/oliviertassinari/react-swipeable-views)。此外,您可以自定义呈现当前显示的幻灯片之前和之后的幻灯片数量(请参见https://react-swipeable-views.com/api/api/#virtualize)。
追赶一些反应概念(https://reactjs.org/docs/introducing-jsx.html)可能也是个好主意。 React不会“隐藏”任何组件,它只会将您选择的组件呈现给DOM,并更新使DOM反映您的状态所需的内容。因此,例如,如果您有多个页面(p1,p2,p3),每个页面都呈现一个组件(c1,c2,c3),而在页面p1上,则仅将组件c1呈现给DOM。