有条件地从组件上移除道具

Question

我有一个列表项，可以展开或单击以查看路线。

如果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组件之外。

Answer 1

在@ 95faf8e76605e973上添加答案，您可以使用内联条件稍微清除一下代码。

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

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

Answer 2

如果条件为假，则可以破坏空对象

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

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