Блог

Я хочу добиться настройки пользовательского интерфейса следующим образом: (http://designrope.com/wp-content/uploads/2014/03/dashboard-ui-4.png )

То есть существует двойное меню — то, что слева, представляет собой меню типа динамической вкладки, в которое добавляется элемент, если после определенного события в приложении (например, пользователь что-то добавляет), а затем главное меню, которое упорядочивает и отображает информацию, связанную с каждой вкладкой. Вкладка меню также является съемной, поэтому, если происходит событие, которое удаляет информацию, связанную с конкретной вкладкой, вкладка меню исчезает.

Проведя исследование, я все еще не уверен, каков наилучший способ добиться этого в ReactJS?

Во-первых, вам нужны данные, которые представляют состояние приложения, например:

 const state = {
  activeAccount: 1,
  activeTab: "settings",
  accounts: [
    { name: "...", 
      type: "facebook", 
      buffer: { ... }, 
      analytics: { ... }, 
      schedule:  { ... },
      settings: { ... } },
    { name: "...", 
      type: "twitter", 
      buffer: { ... }, 
      analytics: { ... }, 
      schedule:  { ... },
      settings: { ... }},
    { name: "...", 
      type: "...", 
      buffer: { ... }, 
      analytics: { ... }, 
      schedule:  { ... },
      settings: { ... }}];
  

Затем организуйте свои компоненты таким же образом:

 const App = function({ accounts, activeAccount }) {
  return (
   <div className="app">
    <div className="accounts">
      {accounts.map(account => (
        <a href="#" onClick={...}>
          {account.name}
        </a>)}
    </div>
    <div className="tabs">
      {accounts[activeAccount].buffer amp;amp; (
        <a href="#" onClick={...}>Buffer</a>)}
      {accounts[activeAccount].analytics amp;amp; (
        <a href="#" onClick={...}>Analytics</a>)}
      {accounts[activeAccount].schedule amp;amp; (
        <a href="#" onClick={...}>Schedule</a>)}
      {accounts[activeAccount].settings amp;amp; (
        <a href="#" onClick={...}>Setting</a>)}
    </div>
    <div className="content">
      { ... some content based on active account and active tab ... }
    </div>
  </div>);

}
  

Я бы рекомендовал использовать react-router для управления состояниями активной учетной записи и вкладок.