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

【问题标题】：Set JSX attribute based on another JSX attribute react根据另一个 JSX 属性设置 JSX 属性 react
【发布时间】：2020-08-23 15:59:56
【问题描述】：

在我的 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，它具有folder JSX 属性，如下所示：

<Card name="Folder" folder/>,

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

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

【问题讨论】：

icon={folder || tag}
你不能做类似<FontAwesomeIcon icon={folder !== undefined ? 'folder' : 'tag'} /> 的事情吗？如果您能澄清一下您是如何调用 Card 以及什么是 typehandler，那就更容易了
我能做到，但我有更多的价值
如何导入文件夹和标签图标？
如果你的意思是字体真棒图标：pastebin.com/9Adk2rvF

标签： javascript reactjs

【解决方案1】：

您可以更新您的父组件并将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 Demo

【讨论】：

【解决方案2】：

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

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


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

【讨论】：

【解决方案3】：

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

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

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

希望这会有所帮助！

【讨论】：

谢谢，但我可以将它与多个 if else 语句一起使用吗？
@Roy 你可以，但会很乱。更好地将其外部化为一个返回所需值的函数。
您可以使用嵌套的三元表达式，这会起作用，但会给您一个警告。例如图标={文件夹？文件夹：？ : 。这相当于有 if, then else-if, then else。