根据另一个 JSX 属性设置 JSX 属性 react

Question

在我的反应应用程序中，我有一个Card组件：

function Card({name, note, folder, tag}) {

    const typeHandler;

    return (
        <div className="card">
            <FontAwesomeIcon icon={typeHandler} className="icon"/>
            <h3 className="text">{name}</h3>            
        </div>
    )
}

如果当我调用卡片组件时，我希望图标参数等于folder ，它具有folder JSX 属性，如下所示：

<Card name="Folder" folder/>,

如果它的（而不是文件夹） tag ，那么图标将是tag ，如果条件有条件的话，我还有一些这样的。 我怎么能做那种事？

FontAwesomeIcon 图标只是一个字符串

我以前尝试过：

function Card({name, note, folder, tag}) {

    const typeHandler = () => {
        if (note) {
            return 'sticky-note'
        }
        else if (folder) {
            return 'folder'
        }
        else if (tag) {
            return 'tag'
        }
    }

    return (
        <div className="card">
            <FontAwesomeIcon icon={typeHandler} className="icon"/>
            <h3 className="text">{name}</h3>            
        </div>
    )
}

Answer 1

假设您只需将这些字段之一传递给 Card，您可以使用 rest 传播语法只需传递图标默认值，以防没有传递

function Card({name, note, ...rest}) {


    return (
        <div className="card">
            <FontAwesomeIcon icon={rest[0] || 'defaultIcon'} className="icon"/>
            <h3 className="text">{name}</h3>            
        </div>
    )
}

Answer 2

您可以为此使用三元表达式，只要将它们放在大括号内即可。 例如，如果你想设置 icon 参数，你可以这样写：

<FontAwesomeIcon icon={folder ? folder : “other-icon”} ... />

这相当于使用典型的 of-else 语句说：如果文件夹不是 null，则将图标设置为文件夹，否则将其设置为“其他图标”。

希望这可以帮助！

Answer 3

您可以更新您的父组件并将icon道具作为带有小写图标名称的字符串传递，例如：

父组件：

<Card name="Folder" icon="folder" />,

然后更新 Card 组件，如：

卡片组件：

import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFolder, faTag, faBars, faStickyNote } from '@fortawesome/free-solid-svg-icons';
library.add(faFolder, faTag, faBars, faStickyNote)

export default function Card({ name, note, icon }) {
  const typeHandler = name => {
    switch (name) {
      case "folder":
        icon = faFolder; break;
      case "tag":
        icon = faTag; break;
      default:
        icon = faTag; break;
    }
    return { icon };
  };

  return (
    <div className="card">
      <FontAwesomeIcon {...typeHandler(icon)} className="icon" />
      <h3 className="text">{name}</h3>
    </div>
  );
}

Codesandbox 演示