javascript - 在 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} />
      )}
    </>
  );
};

那么我如何在一行代码中为选定的组件提供样式。

我想要这样的代码。

标签： javascriptreactjsantd

Answer 1

由于我们只分配一次道具，因此该解决方案可以更好地扩展。

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