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

IT技术 javascript reactjs
2021-05-15 11:48:23

在我的react应用程序中，我有一个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如果当我调用卡片组件时，我希望 icon 参数相等，它有一个folderJSX 属性，如下所示：

<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>
    )
}
3个回答

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

父组件：

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

代码沙盒演示

假设您只需将这些字段之一传递给 Card，您可以使用 rest spread 语法简单地传递图标默认值 incase 没有传递任何内容

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


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

您可以为此使用三元表达式，只要将它们放在花括号内即可。例如，如果您想设置图标参数，您可以编写如下内容：

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

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

希望这可以帮助！

其它你可能感兴趣的问题
上一篇ReactJS - axios.post 的同步问题 下一篇带有 React Router 的多参数