Saya meneruskan komponen melalui alat peraga seperti:

const someicon = <SomeIcon>
..
<Sidebar icon={someicon} />

Kemudian styling dengan emosi/gaya seperti:

const StyledIcon = styled(props.icon)`
  ...
`;

Tetapi StyledIcon yang saya dapatkan adalah objek:

{$$typeof: Symbol(react.forward_ref), defaultProps: undefined, __emotion_real: {…}, __emotion_base: {…}, render: ƒ, …}$$typeof: Symbol(react.forward_ref)defaultProps: undefinedrender: ƒ (props, ref)withComponent: ƒ (nextTag, nextOptions)__emotion_base: {$$typeof: Symbol(react.element), key: null, ref: null, props: {…}, type: ƒ, …}__emotion_forwardProp: undefined__emotion_real: {$$typeof: Symbol(react.forward_ref), defaultProps: undefined, __emotion_real: {…}, __emotion_base: {…}, render: ƒ, …}__emotion_styles: (4) ["label:StyledAppIcon;", "color:", ƒ, ";width:2em;height:2em;/*# sourceMappingURL=data:ap…1cblxuZXhwb3J0IGRlZmF1bHQgU2lkZWJhcjtcbiJdfQ== */"]displayName: (...)toString: ƒ value()get displayName: ƒ ()set displayName: ƒ (name)__proto__: Object

Saya tidak tahu apa yang terjadi di sini dan bagaimana meneruskan komponen dengan benar melalui alat peraga, lalu menatanya dan kemudian merendernya.

Terima kasih

0
Prince Agrawal 12 Mei 2021, 16:45

1 menjawab

Jawaban Terbaik

Itu karena komponen-gaya hanya berfungsi untuk komponen jadi Anda harus melewati ikon sebagai komponen (setidaknya fungsi yang mengembalikan BEJ):

const someicon = () => <SomeIcon>

Selain itu, Anda harus meneruskan prop className:

const someicon = ({ className }) => <SomeIcon className={className}>

Jika komponen ikon Anda tidak berisi template lebih dari <SomeIcon />, maka tidak perlu membungkusnya, cukup tulis ini:

<Sidebar icon={SomeIcon} />

Dan pastikan className diambil dengan benar dari props dan disetel pada elemen DOM di dalam komponen SomeIcon, karena komponen gaya bekerja dengan kelas di bawah tenda.

Catatan: ini sebenarnya bukan praktik yang baik untuk mendeklarasikan komponen bergaya di dalam komponen lain karena akan dihitung pada setiap siklus render, dan akan menampilkan peringatan ini:

Komponen Styled(icon) dengan id "sc-iqAclL" telah dibuat secara dinamis. Anda mungkin melihat peringatan ini karena Anda telah memanggil gaya di dalam komponen lain. Untuk mengatasi ini, buat saja StyledComponents baru di luar metode render dan komponen fungsi apa pun.

1
Guerric P 12 Mei 2021, 14:49