प्रतिक्रिया - देश-ध्वज-चिह्न पुस्तकालय का गतिशील उपयोग

Question

हम https://www.npmjs.com/package/country-flag-icons का उपयोग कर रहे हैं लाइब्रेरी जो इस तरह से रिएक्ट में फ्लैग आइकन का उपयोग करने की अनुमति देती है:

import Flags from 'country-flag-icons/react/3x2'

<Flags.US title="United States" className="..."/>

लेकिन मैं इसे गतिशील रूप से कैसे उपयोग कर सकता हूं? क्योंकि राज्य कोड सेवाओं के माध्यम से वापस किया जाता है।

मेरा मतलब है कुछ इस तरह का समाधान:

<Flags.{myVar} title="United States" className="..."/>

संपादित करें यह मेरी फाइल है:

import { Link } from "react-router-dom";
import Flags from "country-flag-icons/react/3x2";

const Person = ({ linkDetail, flagNationCode }) => (
  <Link to={linkDetail}>
   
    <div className="person-footer">
      <div className="info">
        <div className="label">{flagNationCode}</div>
        <div className="value">
            <Flags.US />
          )}
        </div>
      </div>
    </div>
  </Link>
);

export default Person;

javascript reactjs

1

C1X 12 जिंदा 2021, 13:14

Answer 1

आपको घटक को एक बड़े अक्षर से शुरू होने वाले चर में चुनना होगा और इसे घटक के रूप में उपयोग करना होगा, उदा .:

const Person = ({ linkDetail, flagNationCode }) => {
  const Flag = Flags[flagNationCode];

  return (
    <Link to={linkDetail}>
      <div className="person-footer">
        <div className="info">
          <div className="label">{flagNationCode}</div>
          <div className="value">
            <Flag />
          </div>
        </div>
      </div>
    </Link>
  );
};

1

cbr 12 जिंदा 2021, 14:06

Answer 2

आप जिस ध्वज को चाहते हैं उसे एक चर में खींच सकते हैं और फिर इसे एक घटक के रूप में उपयोग कर सकते हैं

import { Link } from "react-router-dom";
import Flags from "country-flag-icons/react/3x2";

const Person = ({ linkDetail, flagNationCode }) => {
const Flag = Flags[flagNationCode];
return (
  <Link to={linkDetail}>
    <div className="person-footer">
      <div className="info">
        <div className="label">{flagNationCode}</div>
        <div className="value">
            <Flag />
        </div>
      </div>
    </div>
  </Link>
)};

export default Person;

0

rockingskier 12 जिंदा 2021, 14:29

प्रतिक्रिया - देश-ध्वज-चिह्न पुस्तकालय का गतिशील उपयोग

2 जवाब

संबंधित सवाल

नए सवाल