javascript - How to render icon based on props using react and typescript? - Stack Overflow

admin管理员组

文章数量:1342739

I'm using react-feather to render icons in a ponent. I'm able to get it to import a static icon by hard coding it in. But how do I make it render the icon based on what has been passed to it in the IconLeft.icon props?

import { Camera } from 'react-feather';
import React, { FunctionComponent } from 'react';

type HeaderProps = {
    title: string;
    iconLeft?: {
        icon?: string;
        url?: string;
        state?: string;
        label?: string;
    }
}

export const DefaultHeader: FunctionComponent<HeaderProps> = ({ title, iconLeft, iconRight}) => <header>
    <h1>{String}</h1>
    <Camera size={24} stroke-width={2}/>
</header>

I'm using react-feather to render icons in a ponent. I'm able to get it to import a static icon by hard coding it in. But how do I make it render the icon based on what has been passed to it in the IconLeft.icon props?

import { Camera } from 'react-feather';
import React, { FunctionComponent } from 'react';

type HeaderProps = {
    title: string;
    iconLeft?: {
        icon?: string;
        url?: string;
        state?: string;
        label?: string;
    }
}

export const DefaultHeader: FunctionComponent<HeaderProps> = ({ title, iconLeft, iconRight}) => <header>
    <h1>{String}</h1>
    <Camera size={24} stroke-width={2}/>
</header>

• javascript
• reactjs
• typescript

Share Improve this question Follow asked Mar 20, 2022 at 11:51 Tom WicksTom Wicks 1,03533 gold badges1616 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You can use JSX.Element as the type for icon props.

Example:

type HeaderProps = {
  title: string;
  icon: JSX.Element;
};

const Header: FC<HeaderProps> = ({ icon, title }) => {
  return (
    <header>
      <h1>{title}</h1>
      {icon}
    </header>
  );
};

export default function App() {
  return (
    <div className="App">
      <Header title="header" icon={<Camera />} />
    </div>
  );
}

You can use cloneElement to dynamically render any ponent you want by passing it as a prop.

import React, { cloneElement, FunctionComponent } from "react";

type HeaderProps = {
    title: string;
    iconLeft?: {
        icon: JSX.Element;
        url?: string;
        state?: string;
        label?: string;
    };
};

export const DefaultHeader: FunctionComponent<HeaderProps> = ({
    title,
    iconLeft,
}) => (
    <header>
        <h1>{String}</h1>
        {iconLeft && cloneElement(iconLeft.icon, { size: 24, "stroke-width": 2 })}
    </header>
);

Usage example:

<DefaultHeader iconLeft={{ icon: <Camera /> }} />

本文标签： javascriptHow to render icon based on props using react and typescriptStack Overflow