Класс компонента 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'));

0 ответов

Другие вопросы по тегам