मैं एक पोर्टफोलियो अनुभाग के लिए एक संपूर्ण कार्ड को बाहरी वेबसाइट से जोड़ने के लिए पथ प्रोप का उपयोग करने में सक्षम होने की कोशिश कर रहा हूं।

कार्डआइटम घटक:

function CardItem(props) {
  return (
    <>
      <li className='cards_item'>
        <a href= {props.path} className="cards_item_link" target="_blank" rel="noopener noreffer">
          <figure className='cards_item_pic-wrap' data-category={props.label}>
            <img
              className='cards_item_img'
              alt='Portfolio Pictures'
              src={props.src}
              path={props.path}
            />
          </figure>
          <div className='cards_item_info'>
            <h5 className='cards_item_text'>{props.text}</h5>
          </div>
        </a>
      </li>
    </>
  );
}

मैं जो कार्डइटम पास कर रहा हूं वह है:


<CardItem
  src=image/magic.png"
  text="Magic App"
  label="iOs"
  path="https://bigassmessage.com/"
/>

I'm pretty sure it's the href linking but not sure how to fix with the correct styling. I tried backticks and ${props.path} but it just keeps me on the same page without properly taking me to a the correct page.

New to react so don't be too harsh.
0
andywalt 12 सितंबर 2020, 03:38

1 उत्तर

सबसे बढ़िया उत्तर

इसलिए मैंने आपके कोड से एक कोड सैंडबॉक्स बनाया और ऐसा लगता है कि यह ठीक काम करता है। केवल एक चीज जो मैंने देखी वह यह थी कि आपने नॉरफेररर गलत लिखा था और आपको छवियों को सार्वजनिक फ़ोल्डर में रखना चाहिए और फिर उन्हें "/image/magic.png" से लिंक करना चाहिए। सार्वजनिक फ़ोल्डर में / बताता है प्रतिक्रिया करता है। यहाँ कोड सैंडबॉक्स के लिए लिंक है। https://codesandbox.io/s/crimson-water -0hxke?file=/src/App.js

1
david snyder 12 सितंबर 2020, 04:11