Javascript 基于另一个JSX属性设置JSX属性

在我的react应用程序中，我有一张

卡

组件：

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

    const typeHandler;

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

如果它（而不是文件夹）

标记

，那么图标将是

标记

，我还有一些if-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>
    )
}

功能卡（{name，note，folder，tag}）{
常量typeHandler=（）=>{
如果（注）{
返回“便笺”
}
else if（文件夹）{
返回“文件夹”
}
else if（标签）{
返回“标签”
}
}
返回(
{name}
)
}

假设您只需将其中一个字段传递给卡，您可以使用rest spread语法，只需在不传递任何内容的情况下传递图标默认值即可

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


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

功能卡（{name，note，…rest}）{
返回(
{name}
)
}

假设您只需将其中一个字段传递给卡，您可以使用rest spread语法，只需在不传递任何内容的情况下传递图标默认值即可

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


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

功能卡（{name，note，…rest}）{
返回(
{name}
)
}

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

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

这相当于使用一个典型的of else语句来表示：如果文件夹不为null，则将icon设置为folder，否则将其设置为“other icon”

---

希望这有帮助

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

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

这相当于使用一个典型的of else语句来表示：如果文件夹不为null，则将icon设置为folder，否则将其设置为“other icon”

---

希望这有帮助

您可以更新父组件，并将

图标

道具作为带有图标名称的字符串传递，如：

父组件：

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

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 name="Folder" icon="folder" />,

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

import{library}来自'@fortawesome/fontawesome svg-core'；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从“@fortwome/free solid svg icons”导入{faFolder、faTag、fabar、faStickyNote}；
库.添加（faFolder、faTag、faBars、faStickyNote）
导出默认功能卡（{名称、注释、图标}）{
const typeHandler=name=>{
交换机（名称）{
案例“文件夹”：
图标=文件夹；断开；
案例“标签”：
图标=faTag；中断；
违约：
图标=faTag；中断；
}
返回{icon}；
};
返回(
{name}
);
}

---

您可以更新父组件，并将

图标

道具作为字符串传递，图标名称以小写形式显示，如：

父组件：

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

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 name="Folder" icon="folder" />,

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

import{library}来自'@fortawesome/fontawesome svg-core'；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从“@fortwome/free solid svg icons”导入{faFolder、faTag、fabar、faStickyNote}；
库.添加（faFolder、faTag、faBars、faStickyNote）
导出默认功能卡（{名称、注释、图标}）{
const typeHandler=name=>{
交换机（名称）{
案例“文件夹”：
图标=文件夹；断开；
案例“标签”：
图标=faTag；中断；
违约：
图标=faTag；中断；
}
返回{icon}；
};
返回(
{name}
);
}

---

图标={folder | | tag}

你不能做一些类似

的事情吗？如果你能澄清一下你是如何使用电话卡的，什么是typehandler，那就更容易了。我可以这么做，但我有更多的价值要做导入文件夹和标签图标？如果你指的是字体很棒的图标：

图标={folder | | tag}

你不能做类似于

的事情吗？如果你能澄清你是如何使用电话卡和什么是typehandler，那会更容易。我可以做到，但我有更多的valueshow要做导入文件夹和标签图标？如果你是指字体很棒的图标：谢谢，但我可以用多个If-else语句吗？@Roy你可以，但它会很混乱。最好将其外部化为一个函数，该函数将返回所需的值。您可以使用嵌套的三元表达式，这将起作用，但会给您一个警告。例如图标={folder？folder:？：。这相当于有if，then-else-if，then-else。谢谢，但是我可以将它与多个if-else语句一起使用吗？@Roy你可以，但它会很混乱。最好将它外部化到一个函数中，该函数将返回所需的值。你可以使用嵌套的三元表达式，它会工作，但会给你一个警告。例如icon={folder？folder:？：。这相当于有if，then else if，then else。