在 ReactJs 中使用 If/Else 语句返回一个组件

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}/>}
        </>
    )
}

• 这和写作是一样的。 如果包装组件有一堆道具，而您只需要特定的道具，您可以尝试以下方法：

  export default (props) => { // 如果 props 有一堆 props 但我们只需要折叠和 // onClick: const {collapsed, onClick} = props const menuProps = {collapsed, onClick}

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