模态组件和道具不能正常工作

Question

昨天我问了一个关于根据单击哪个按钮向Modal组件发送不同数据集的问题。(链接到问题)我做了一些改变，遇到了一个新的问题，现在当模态被任何按钮激活时，屏幕变成空白。我觉得这是一个简单的解决方案，但我不知道去哪里找。而且，我不认为我正确地访问了对象("title")和"desc")，一旦它被传递到Modal。React门户的index.htmldiv在正确的位置，我不认为这是一个CSS问题，因为当它工作时我没有对它做任何事情。

当前代码:

ServicesCard

const SERVICES_INFO = {
s1: { title: 'Service 1', desc: 'Description 1' },
s2: { title: 'Service 2', desc: 'Description 2' },
s3: { title: 'Service 3', desc: 'Description 3' },
s4: { title: 'Service 4', desc: 'Description 4' },
};
const ServicesCard = () => {
const [selectedService, setSelectedService] = useState(null);
const selectService = (service) => setSelectedService(service);
const closeModal = () => setSelectedService(null);
return (
<div className={classes.ServicesCard}>
<div className={classes.ServicesCardContainer}>
<div className={classes.TitleContainer}>
<h2>Services</h2>
<hr />
</div>
<div className={classes.ButtonContainer}>
<button onClick={() => selectService('s1')} id="s1">
Service 1
</button>
<button onClick={() => selectService('s2')} id="s2">
Service 2
</button>
<button onClick={() => selectService('s3')} id="s3">
Service 3
</button>
<button onClick={() => selectService('s4')} id="s4">
Service 4
</button>
<ServiceModal
show={selectedService !== null}
close={closeModal}
serviceInfo={SERVICES_INFO[selectedService]}
/>
</div>
<p>Click For More Info</p>
</div>
</div>
);
};

ServiceModal

const ServiceModal = (props) => {
return ReactDOM.createPortal(
<>
{props.show ? (
<div className={classes.modalContainer} onClick={() => props.close()}>
<div className={classes.modal} onClick={(e) => e.stopPropagation()}>
<header className={classes['modal_header']}>
<h2> {props.serviceInfo} </h2>
<hr />
</header>
<div className={classes['modal_content']}>
<main> {props.serviceInfo} </main>
</div>
<footer className={classes.Footer}>
<button
className={classes['modal-close']}
onClick={() => props.close()}
>
Cancel
</button>
</footer>
</div>
</div>
) : null}
</>,
document.getElementById('modal')
);
};

Answer 1

首先，将函数传递给子组件的方式是错误的。它应该是这样的:

const PageComponent = () => {
const handleClickOnButton = () => {
console.log('clicked');
}
return ( 
<Button handleClick={handleClickOnButton}>;
)
}
const ButtonComponent = (props) => {
return (
<button onClick={props.handleClick}>;
)
}

然后，我建议在你的父组件中添加一个状态来管理模态的打开/关闭。例如:

const [modalOpen, setModalOpen] = useState(false);

和你添加条件语句检查这个状态，知道你是否显示你的模态:

{ modalOpen &&
<ServiceModal
show={selectedService !== null}
close={closeModal}
serviceInfo={SERVICES_INFO[selectedService]}
/>
}

这可能不能解决所有问题，但这是一个好的开始。

Answer 2

你试图在你的模态组件上呈现一个对象，而React无法呈现对象。你应该修改的是:

<h2> {props.serviceInfo.title} </h2>
<main> {props.serviceInfo.desc} </main>

因为它们是字符串，所以可以呈现