Question

我希望按照以下方式实现UI设置：（http://designrope.com/wp-content/uploads/2014/03/dashboard-ui-4.png）

也就是说，有一个双重菜单 - 左边的那个是动态标签类型菜单，如果在应用程序中的某个事件（例如用户添加内容）之后添加了项目，然后是主菜单，组织和呈现与每个选项卡关联的信息。 “菜单”选项卡也是可移除的，因此如果发生的事件消除了与特定选项卡关联的信息，则菜单选项卡将消失。

经过研究，我仍然不确定在ReactJS中实现这一目标的最佳方法是什么？

Answer 1

首先，您需要表示应用状态的数据，例如：

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 && (
        <a href="#" onClick={...}>Buffer</a>)}
      {accounts[activeAccount].analytics && (
        <a href="#" onClick={...}>Analytics</a>)}
      {accounts[activeAccount].schedule && (
        <a href="#" onClick={...}>Schedule</a>)}
      {accounts[activeAccount].settings && (
        <a href="#" onClick={...}>Setting</a>)}
    </div>
    <div className="content">
      { ... some content based on active account and active tab ... }
    </div>
  </div>);

}

我建议使用react-router来管理活动帐户和标签状态。

ReactJS中的动态菜单选项卡

1 个答案: