Question

我有一个组件将网站 URL 作为道具传递给 Mockup 组件：

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。

有什么想法吗？

Answer 1

我想我在接收它作为桌面组件的道具时忘记解构 site

iframe 再次渲染 localhost 而不是我从 props 传入的网站

1 个答案: