Блог

У меня есть компонент, передающий URL-адрес веб-сайта компоненту макета в качестве реквизита:

 if (pageContent === 'mockup') {
        return <Mockup currentSite={currentSite} />;
} 
 

Компонент макета:

 const Mockup = ({ currentSite }) => {
    // const [currentMockup, setCurrentMockup] = useState('desktop');

    let mockupType;
    if (currentMockup === 'desktop') {
        mockupType = <Desktop site={currentSite} />;
    } else if (currentMockup === 'mobile') {
        mockupType = <Mobile site={currentSite} />;
    } else if (currentMockup === 'tablet') {
        mockupType = <Tablet site={currentSite} />;
    }

    return mockupType;
};

export default Mockup;
 

Когда я console.log(currentSite) , это та ценность, которую я ищу. Вот компонент iframe:

 import './Desktop.css';
import desktopMockup from '../../assets/desktop.png';

const Desktop = site => {

console.log(currentSite); // correct value is returned

    return (
        <div className="desktop">
            <iframe src={site} scrolling="no" title="desktop"></iframe>
            <img src={desktopMockup} alt="desktop mockup" />
        </div>
    );
};

export default Desktop;
 

Поэтому, когда currentSite реквизит попадает в компонент рабочего стола, это правильное значение. Если я жестко закодирую веб-сайт, он работает, но когда я передаю его в качестве аргумента, он повторно отображает localhost.

Есть какие-нибудь идеи?

Наверное, я забыл деструктировать site , когда получал его в качестве опоры на своем настольном компоненте