TODO: 解决多次渲染问题
This commit is contained in:
eson
parent
1b3d440f8d
commit
23171e6cbf
82
src/App.js
82
src/App.js
|
|
@ -6,14 +6,10 @@ import { Button, Layout, Menu, Tabs } from 'antd';
|
|||
import 'antd/dist/antd.css';
|
||||
import React, {useRef} from 'react';
|
||||
|
||||
|
||||
import './App.less';
|
||||
import ChartsCount from './ChartsCount';
|
||||
import TableData from './TableData';
|
||||
import ContentTabs from './ContentTabs'
|
||||
import TabsRoute from './Router';
|
||||
import { Link, Route, Router, HashRouter, Switch, useHistory } from 'react-router-dom';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const { Header, Content, Footer, Sider } = Layout;
|
||||
|
||||
class App extends React.Component {
|
||||
|
|
@ -22,14 +18,11 @@ class App extends React.Component {
|
|||
super(props)
|
||||
this.state = {
|
||||
platform: "openrec",
|
||||
collapsed: false,
|
||||
tkey: "content_table",
|
||||
location: null,
|
||||
tab: "tabledata",
|
||||
collapsed: false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
toggleCollapsed = () => {
|
||||
this.setState({
|
||||
collapsed: !this.state.collapsed,
|
||||
|
|
@ -37,17 +30,17 @@ class App extends React.Component {
|
|||
};
|
||||
|
||||
changePlatform = (p) => {
|
||||
// this.setState({ platform: p });
|
||||
// if (this.chartscount && this.chartscount.state.platform !== p) {
|
||||
// this.chartscount.changePlatform(p)
|
||||
// }
|
||||
// this.tabledata.changePlatform(p);
|
||||
this.setState({platform: p}, () => {
|
||||
this.refs.ctabs.changePlatform(this.state.platform);
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const {tab, platform } = this.state;
|
||||
|
||||
return (
|
||||
<HashRouter>
|
||||
|
||||
|
||||
<Layout>
|
||||
<Sider
|
||||
trigger={null}
|
||||
|
|
@ -79,54 +72,7 @@ class App extends React.Component {
|
|||
</Header>
|
||||
|
||||
<Content ref="content" style={{ margin: '0 8px' }}>
|
||||
<Switch>
|
||||
<Tabs
|
||||
onChange={(e) => {
|
||||
const history = useHistory();
|
||||
|
||||
const { platform } = this.state;
|
||||
this.setState({ key: e })
|
||||
|
||||
switch (e) {
|
||||
case "content_table":
|
||||
history.push("#/data")
|
||||
// this.props.history.push("#/data")
|
||||
if (this.refs.ctable) {
|
||||
this.refs.ctable.changePlatform(platform);
|
||||
}
|
||||
break;
|
||||
case "tag_count":
|
||||
history.push("#/count")
|
||||
// this.props.history.push("#/count")
|
||||
if (this.refs.tcharts) {
|
||||
this.refs.tcharts.changePlatform(platform);
|
||||
}
|
||||
break
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
}} >
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<TabPane tab="数据表格" key="content_table">
|
||||
<Route path="/data" render={()=>{
|
||||
return <TableData platform={this.state.platform} ></TableData>
|
||||
}} ></Route>
|
||||
</TabPane>
|
||||
|
||||
<TabPane tab="tag统计" key="tag_count">
|
||||
<Route path="/count" render={()=>{
|
||||
return <ChartsCount platform={this.state.platform} ></ChartsCount>
|
||||
}} ></Route>
|
||||
</TabPane>
|
||||
|
||||
</Tabs>
|
||||
</Switch>
|
||||
<ContentTabs ref="ctabs" tab={tab} platform={platform}></ContentTabs>
|
||||
</Content>
|
||||
|
||||
<Footer style={{ textAlign: 'center' }}>
|
||||
|
|
@ -134,11 +80,9 @@ class App extends React.Component {
|
|||
</Footer>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</HashRouter>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ReactDOM.render(<App />, mountNode);
|
||||
|
||||
export default App;
|
||||
|
|
@ -83,7 +83,7 @@ function getOption(state = {}) {
|
|||
|
||||
class ChartsCount extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
constructor(props) { // platform
|
||||
super(props)
|
||||
this.state = {
|
||||
option: {},
|
||||
|
|
@ -94,20 +94,23 @@ class ChartsCount extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
changePlatform = (p) => {
|
||||
this.setState({ platform: p }, () => {
|
||||
this.updateData();
|
||||
});
|
||||
changePlatform = (platform) => {
|
||||
this.updateData({ platform: platform, countkey: this.state.countkey })
|
||||
};
|
||||
|
||||
updateData = () => {
|
||||
const { countkey, platform } = this.state;
|
||||
fetch(`${apihost}/tag/count?platform=${platform}&countkey=${countkey}`, {
|
||||
updateData = (params = {}) => {
|
||||
|
||||
const {platform, countkey, title} = params
|
||||
|
||||
fetch(`${apihost}/tag/count?platform=${platform?platform:this.state.platform}&countkey=${countkey?countkey:this.state.countkey}`, {
|
||||
"mode": "cors"
|
||||
}).then(
|
||||
response => {
|
||||
response.json().then(value => {
|
||||
this.setState({
|
||||
title: title?title:this.state.title,
|
||||
platform: platform?platform:this.state.platform,
|
||||
countkey: countkey?countkey:this.state.countkey,
|
||||
data: parseData(value)
|
||||
}, () => {
|
||||
var ins = this.echarts_react.getEchartsInstance();
|
||||
|
|
@ -119,12 +122,8 @@ class ChartsCount extends React.Component {
|
|||
)
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.updateData();
|
||||
}
|
||||
|
||||
countMethod(countkey, title) {
|
||||
this.setState({ countkey: countkey, title: title }, () => { this.updateData() });
|
||||
this.updateData({countkey: countkey, title: title});
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
75
src/ContentTabs.js
Normal file
75
src/ContentTabs.js
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
|
||||
import React from 'react';
|
||||
import { Button, Layout, Menu, Tabs } from 'antd';
|
||||
import ChartsCount from './ChartsCount';
|
||||
import TableData from './TableData';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
class ContentTabs extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
platform: this.props.platform,
|
||||
tab: this.props.tab,
|
||||
count: 1,
|
||||
}
|
||||
}
|
||||
|
||||
count = 1
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
}
|
||||
|
||||
changeTab = (tab) => {
|
||||
this.setState({tab: tab}, ()=>{ this.updateDate() })
|
||||
}
|
||||
|
||||
updateDate() {
|
||||
|
||||
switch(this.state.tab) {
|
||||
case "tabledata":
|
||||
if (this.refs.tabledata) {
|
||||
this.refs.tabledata.changePlatform(this.state.platform);
|
||||
}
|
||||
break;
|
||||
|
||||
case "chartscount":
|
||||
if (this.refs.chartscount) {
|
||||
this.refs.chartscount.changePlatform(this.state.platform);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
changePlatform = (platform) => {
|
||||
this.setState({platform: platform}, ()=>{ this.updateDate()})
|
||||
}
|
||||
|
||||
render() {
|
||||
this.count ++
|
||||
return (
|
||||
|
||||
<Tabs
|
||||
onChange={
|
||||
this.changeTab
|
||||
} >
|
||||
|
||||
<TabPane tab="数据表格" key="tabledata">
|
||||
<TableData ref="tabledata" platform={this.state.platform} ></TableData>
|
||||
</TabPane>
|
||||
|
||||
<TabPane tab="tag统计" key="chartscount">
|
||||
<ChartsCount ref="chartscount" platform={this.state.platform} ></ChartsCount>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default ContentTabs;
|
||||
|
|
@ -4,7 +4,7 @@ import { HashRouter, Route, Switch, BrowserRouter, Redirect } from 'react-router
|
|||
import TableData from "./TableData";
|
||||
import ChartsCount from "./ChartsCount";
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Button, Layout, Menu, Tabs } from 'antd';
|
||||
import { Button, Layout, Menu, Tabs, Result } from 'antd';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
|
|
@ -14,15 +14,20 @@ const MainRouter = () => {
|
|||
return (
|
||||
<BrowserRouter>
|
||||
<Switch>
|
||||
{/* <Redirect from="/" to="#/data" ></Redirect> */}
|
||||
<Route exact path="/" component={
|
||||
App
|
||||
} >
|
||||
</Route>
|
||||
<Route exact path="/login" component={
|
||||
ChartsCount
|
||||
}>
|
||||
</Route>
|
||||
} />
|
||||
|
||||
|
||||
<Route exact path="/*" render={ () => {
|
||||
return <Result
|
||||
status="404"
|
||||
title="404"
|
||||
subTitle="Sorry, the page you visited does not exist."
|
||||
extra={<Button type="primary" href="/">Back Home</Button>}
|
||||
/>
|
||||
}} />
|
||||
|
||||
</Switch>
|
||||
</BrowserRouter>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import App from './Router';
|
||||
import MainRouter from './Router';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
import { Route } from 'react-router-dom';
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<MainRouter />
|
||||
</React.StrictMode>,
|
||||
<MainRouter/>,
|
||||
// <React.StrictMode>
|
||||
// <MainRouter />
|
||||
// </React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user