我從一個父組件渲染 5 列，它們都有不同的圖標。 我如何有條件地讓他們做出反應？

Question

我已經制作了一個父組件，並將重復使用組件時間。 所以，我有 5 個不同的圖標，它們都取自英雄圖標。 我制作了一個 object，每個子組件都有不同的 ID，但不知道如何呈現圖標。 這些圖標似乎有相當大的語法，只有 HTML。 是否可以將它們放在 object 中並將它們稱為屬性？ svg 標簽是應該放置圖標的地方。這是其中之一。

  <div className="flex flex-col bg-stone-100">
          <div className="flex flex-row flex-shrink-0 flex-grow-0 relative mt-2 mr-7 mb-7 ml-4">
            <span className="h-1 w-1 mr-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                height={18}
                width={18}
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"
                />
              </svg>
            </span>

Answer 1

好主意是為此目的創建組件——這將使您的代碼更清晰。 你可以創建這樣的東西：

const SvgIcon = ({ width, height, iconUrl, iconFill }) => (
  <span className="h-1 w-1 mr-4">
    <svg
      xmlns={iconUrl}
      fill={iconFill}
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      height={width}
      width={height}
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"
      />
    </svg>
  </span>
);

export default SvgIcon;

當然，您可以調整道具以滿足您的需要。 之后，您可以在任何需要的地方調用 SvgIcon：

  <SvgIcon
    width={18}
    height={18}
    iconFill="none"
    iconUrl="http://www.w3.org/2000/svg"
  />

Answer 2

這個MDN 用戶指南可能會有一些用處。 注意：不是單線解決方案，但比您擁有的要少：:)