использование оператора If / Else в ReactJs для возврата компонента

Question

Вот courseButton.jsx :

import React from "react";
import styles from "./styles.module.scss";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";

export default (props) => {
  const { collapsed, onClick } = props;

  return <>{collapsed ? MenuUnfoldOutlined : MenuFoldOutlined}</>;
};

Оба моих компонента имеют одинаковые свойства. Поэтому я хочу избежать такого кодирования:

import React from "react";
import styles from "./styles.module.scss";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";

export default (props) => {
  const { collapsed, onClick } = props;

  return (
    <>
      {collapsed ? (
        <MenuUnfoldOutlined className={styles.trigger} onClick={onClick} />
      ) : (
        <MenuFoldOutlined className={styles.trigger} onClick={onClick} />
      )}
    </>
  );
};

Так, как я могу придать выбранному компоненту стиль в одной строке кода.

Я хочу что-то вроде этот код .

Answer 1

Это решение масштабируется лучше, поскольку мы назначаем реквизиты только один раз.

export default (props) => {
  const { collapsed, onClick } = props;
  const Component = collapsed ? MenuUnfoldOutlined : MenuFoldOutlined;
  return <Component className={styles.trigger} onClick={onClick} />;
};

Answer 2

Если я вас правильно понял, вы хотите сохранить свой код DRY. Вы можете хранить свои реквизиты в переменной, чтобы их можно было повторно использовать.

export default (props) => {
    const {collapsed, onClick} = props;

    const genericProps = {
       className: styles.trigger,
       onClick,
    }

    if (collapsed) {
       return <MenuUnfoldOutlined {...genericProps} />
    }

    return <MenuFoldOutlined {...genericProps} />
}

Примечание : React Fragment является избыточным.

Answer 3

Вы можете просто написать это так:

import React from "react"
import styles from "./styles.module.scss"
import {MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons'


export default (props) => {
    const {collapsed, onClick} = props

    return (
        <>
            {collapsed ? <MenuUnfoldOutlined {...props} /> : <MenuFoldOutlined {...props}/>}
        </>
    )
}

• Это то же самое, что и письмо. Если у компонента обертки есть куча реквизитов и вам нужны только определенные c реквизиты, вы можете попробовать следующий подход:

  export default (props) => {// Если реквизиты имеют кучу реквизитов, но мы нужно только свернуть и // onClick: const {свернут, onClick} = props const menuProps = {свернуто, onClick}

      return (
          <>
              {collapsed ? <MenuUnfoldOutlined {...menuProps} /> : <MenuFoldOutlined {...menuProps}/>}
          </>
      )
  }