Question

我正在尝试编写一个仪表板侧栏，该侧栏具有几个“主要”按钮，这些按钮（通过Bootstrap）折叠了许多“辅助”按钮。我希望能够轻松地对整个内容进行更新和样式设置，因此无法编写静态标记。这是数组之外的一个对象：

const menuArray = [
{
  primaryText: "Applications",
  primaryIcon: "fa fa-rocket",
  primaryURL: "/applications",
  secondaries: [
    {
      secondaryText: "Softwares",
      secondaryURL: "/softwares",
    },
    {
      secondaryText: "Videogames",
      secondaryURL: "/videogames",
    },
    {
      secondaryText: "Tools",
      secondaryURL: "/tools",
    },
  ],
},
]

这是渲染数组的函数，我只是通过{renderMenuArray}在JSX标记中调用

const renderMenuArray = menuArray.map((menuItem) => (
<li className="py-2">
  <button
    data-target={`#${menuItem.primaryText}Submenu`}
    data-toggle="collapse"
    aria-expanded="false"
    className="btn btn-dark btn-menu btn-block pl-0 mb-1"
  >
    <Link to={menuItem.primaryURL}>
      <span className="mr-3">
        <i className={menuItem.primaryIcon}></i>
      </span>
      {menuItem.primaryText}
    </Link>
  </button>

  <div
    className="card-body collapse ml-5"
    id={`${socialItem.primaryText}Submenu`}
  >
    <ul className="list-unstyled">
      <li>
        <Link className="small" to="/applications/softwares">
          <span className="mr-3">
            <i className="fa fa-chevron-right"></i>
          </span>
          Softwares
        </Link>
      </li>
    </ul>
  </div>
));

我可以毫无问题地渲染“主要”对象，但是我希望每个“主要”对象（父数组的每个迭代）都可以通过“次要”数组的计数进行每次迭代（这将是每个“主要”对象都不同）。

我是初学者。

Answer 1

传递到地图的回调函数menuItem的对象具有包含的属性secondaries。由于secondaries是一个数组，因此可以在此属性上使用map，只需将地图放在JSX内即可。

<div
    className="card-body collapse ml-5"
    id={`${socialItem.primaryText}Submenu`}
  >
    <ul className="list-unstyled">
      {menuItem.secondaries.map((subItem) => {
        ...
      })

    </ul>
</div>

P.S。您忘记了关闭上一个div标签，并且还有第二个</li>而不是</ul>

Answer 2

这将起作用（使其更具功能性，为您提供功能性React组件的可能示例）

const menuArray = [
  {
    primaryText: "Applications",
    primaryIcon: "fa fa-rocket",
    primaryURL: "/applications",
    secondaries: [
      {
        secondaryText: "Softwares",
        secondaryURL: "/softwares"
      },
      {
        secondaryText: "Videogames",
        secondaryURL: "/videogames"
      },
      {
        secondaryText: "Tools",
        secondaryURL: "/tools"
      }
    ]
  }
];

export default function App(props) {
  function renderSecondaryMenu(items) {
    return items.map(secondaryItem => {
      return (
        <li>
          <Link className="small" to={secondaryItem.secondaryURL}>
            <span className="mr-3">
              <i className="fa fa-chevron-right" />
            </span>
            {secondaryItem.secondaryText}
          </Link>
        </li>
      );
    });
  }

  function renderMenuArray() {
    return menuArray.map(menuItem => {
      return (
        <li className="py-2">
          <button
            data-target={`#${menuItem.primaryText}Submenu`}
            data-toggle="collapse"
            aria-expanded="false"
            className="btn btn-dark btn-menu btn-block pl-0 mb-1"
          >
            <Link to={menuItem.primaryURL}>
              <span className="mr-3">
                <i className={menuItem.primaryIcon} />
              </span>
              {menuItem.primaryText}
            </Link>
          </button>

          <div
            className="card-body collapse ml-5"
            id={`${menuItem.primaryText}Submenu`}
          >
            <ul className="list-unstyled">
              {renderSecondaryMenu(menuItem.secondaries)}
            </ul>
          </div>
        </li>
      );
    });
  }

  return <div className="App">{renderMenuArray()}</div>;
}

Answer 3

除非您使用相同的补充工具栏组件和不同的按钮集，并且希望在它们之间进行切换，否则我认为将补充工具栏定义为对象不会带来很多好处。 JSX已经是一种标记语言，因此它是声明性的。您可以将补充工具栏定义为

def setUp(self):

     obj1 = User.objects.create(username='test',email= 'abc@gmail.com', first_name='t', last_name='u', password="password")

    self.login_url = reverse('accounts:login')


def test_on_successful_login(self):

    client = Client()

    response = client.post(self.login_url,{'username':'test','password':'password'},format='text/html')

    self.assertEqual(response.status_code, 302)

然后根据需要实现每个组件以显示它们。我认为这更干净，更易于维护和修改。

在React JSX中将嵌套数组映射到映射数组中

3 个答案: