Класс компонента ES6 с помощью Flux's Container.createFunctional()
Новый реагировать и флюс. У меня есть заявление, которое я принимаю. Класс Dashboard когда-то был функцией:
function Dashboard(props) {
return (<div>Hello</div>);
}
Но подкомпоненты в компоненте Dashboard (не включены здесь) не обновляются при получении новых реквизитов из магазина, потому что, как я понял, sub / child-component не обновляется, если только state
изменения. Итак, мой мыслительный процесс - создать класс ES6, а затем просто установить реквизиты в состояние.
Преобразование функции Dashboard в класс делает ее неспособной работать, так как я работаю в:
Uncaught (in promise) TypeError: Cannot call a class as a function
Dashboard.jsx
class Dashboard extends Component {
constructor(props) {
super(props);
console.log('Dashboard');
console.log(props);
}
static render() {
console.log('Render dashboard');
return (<div>Hi</div>);
}
}
export default Dashboard;
страницы / панели / index.js
import { Container } from 'flux/utils';
import Dashboard from './Dashboard.jsx';
import ApplicationStore from '../../stores/ApplicationStore';
function getStores() {
return [
ApplicationStore,
];
}
function getState() {
const appState = ApplicationStore.getState();
return {
isScheduled: appState.get('isScheduled'),
};
}
export default Container.createFunctional(Dashboard, getStores, getState);
App.jsx
import Dashboard from './pages/dashboard';
function App(props) {
console.log('Render App');
return (
<BrowserRouter>
<div className="App">
<div className="container-fluid">
<Switch>
<Route exact path="/" component={Dashboard}/>
</Switch>
</div>
</div>
</BrowserRouter>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import AppContainer from './AppContainer';
ReactDOM.render(<AppContainer/>, document.getElementById('root'));