Reactjs - コンポーネントから条件付きで props を削除する

ルートを展開またはクリックできるリスト項目があります。

私が達成したいのは、ListItem を展開できる場合、NavLink コンポーネントを渡さないことです。したがって、これは単なる ListItem になります。

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

Component、to、activeClassName、exact を ListItem コンポーネントに渡すことから除外する方法がわかりません。

1

展開された状態とクリックされた状態をどのように定義しますか?

– ブサジュラ ブラヒム

9月2020 年 3 月 11:55

------------------------

@95faf8e76605e973 の回答を追加すると、インライン条件を使用してコードを少しクリーンアップできます。

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

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

2

1

@bertdida (salamat) は良さそうです。この構文は機能するようです --> var x = {...false}、または var x = {...123}。興味深い

– 95faf8e76605e973

2020 年 9 月 4 日 4:30

Np 小さいです!何だと思う？ {...null} と {...unknown} も機能します。これは、js ではすべてがオブジェクトであるためです。

– ベルトディダ

2020 年 9 月 4 日 4:54

------------------------

条件が 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}
>