reactjs - Bir React.FunctionComponent<React.SVGProps<SVGSVGElement>>'i başka bir bileşene prop olarak göndermek

Bir SVG'den bir React functionComponent içe aktarmaya ve ardından bu SVG'yi render etmek için başka bir bileşene prop olarak göndermeye çalışıyorum. Aşağıdaki kurulumla, bu sorunsuz şekilde derleniyor, ancak sonunda tarayıcıda SVG'yi render etmeye çalışırken çöküyor:

Hata: Nesneler bir React çocuğu olarak geçerli değildir (bulundu: {$$typeof, render} anahtarlarına sahip nesne). Eğer bir çocuklar koleksiyonunu render etmek istiyorsanız, bunun yerine bir dizi kullanın.

Aşağıdaki sınıflar basitleştirilmiştir. Ama yapmaya çalıştığım şeyin özü şudur:

overlay.tsx içinde:

import { ReactComponent as icon } from "/icon.svg";
import CustomItem from "/customItem";

const Overlay: React.FC<OverlayProps> = () => {

    return (
        <div>
            <CustomItem icon={icon}/>
        </div>
    );
    export default Overlay;
}

ve customItem.tsx içinde:

import React from "react";

export interface CustomItemProps {
    icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
}

const CustomItem: React.FC<CustomItemProps> = ({icon}) => {

    return (
        <div>
            {icon}
        </div>
    );
};

export default ApplicationsDropdownItem;

Sorunumun {icon} sözdizimi ile ilgili bir yerde olduğunu varsayıyorum, ama yerine ne kullanmam gerektiğini bir türlü bulamıyorum.

Cevap #1

Cevap

İçe aktardığınız simge bir bileşendir, bu nedenle JSX'i render etmek için çağrılması gerekir.

<Icon {...props}/> (doğru) veya {Icon(props)} (önerilmez)

Bir bileşen olduğu için, ona icon değil Icon adını vermelisiniz.

SVGR'yi açıklayan bu blog yazısına bir göz atın.

TL;DR - Bileşenleri render etmenin en iyi yöntemi

A. Bileşeni render metodunuzda bileşen sözdizimi <MyComponent/> ile çağırın, MyComponent() ile değil.

B. Bileşeninizi bir değişken olarak örnekleyin ve bunu render metodunuzun JSX bloğuna geçirin.

Daha fazla bilgi

@DustInCompetent, bir JSX bloğu içinde bir bileşeni fonksiyon olarak çağırma sorununu gündeme getirdi.

Burada ve burada açıklandığı gibi, bu, React'in bir bileşenin kancalarını kaydetmemesine ve durum ve diğer sorunlara yol açacaktır.

Eğer bir Yüksek Seviyeli Bileşen (HOC) uyguluyorsanız, o zaman bir bileşeni render metodunun içinde (fonksiyonel bileşenlerde return ifadesi) çağırmamalısınız, çünkü bu, bileşenin benzer kayıt sorunları için problemlere yol açar.

Cevap #2

import React from "react";
import { ReactComponent as SampleIcon } from "/sample_icon.svg";

export interface CustomItemProps {
  Icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
}

const CustomItem: React.FC<CustomItemProps> = (props) => {
  const Temp = props.Icon as React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
  return (
    <div>
      <Temp/>
    </div>
  );
};

<CustomItem Icon={SampleIcon}/>

İlgili makaleler