Условно удалить реквизиты из компонента

#reactjs #material-ui

#reactjs #материал-пользовательский интерфейс

Вопрос:

У меня есть элемент списка, который можно либо развернуть, либо щелкнуть по маршруту.

Чего я хотел бы добиться, если ListItem можно расширить, не передавайте компонент NavLink. Так что это будет просто ListItem.

 <ListItem
        className="sidebar-item"
        onClick={onClick}
        button
        {...rest}
        component={NavLink}
        to={path}
        activeClassName="Mui-selected"
        exact
      >

Я не уверен, как я могу исключить component, to, activeClassName and exact из перехода в компонент ListItem.

Ответ №1:

Добавив ответ на @95faf8e76605e973, вы могли бы немного очистить код, используя встроенное условие.

 const conditionalProps = {
  component: NavLink,
  to: path,
  activeClassName: "Mui-selected",
  exact: true,
};

<ListItem
  className="sidebar-item"
  onClick={onClick}
  button
  {...rest}
  {...(someCondition amp;amp; conditionalProps)}
>

1. выглядит хорошо @bertdida (salamat), так что, похоже, этот синтаксис работает -> var x = {...false} или даже var x = {...123} . интересно

2. Np крошечный! Угадайте, что? {...null} и {...undefined} тоже работает. Это потому, что в js все является объектом.

Ответ №2:

Вы можете уничтожить пустой объект, если условие равно false

 if (someCondition === false) {
  conditionalProps = {};
} else {
  conditionalProps = {
    component: NavLink,
    to: {path},
    activeClassName: "Mui-selected",
    exact: true
  };
}

<ListItem
    className="sidebar-item"
    onClick={onClick}
    button
    {...rest}
    {...conditionalProps}
>