通过关键点显示特定零部件

Question

我有这个WP API数据，我正在获取到一个名为"；HostingCard"；。我正在映射这个组件，它呈现三张卡片。在映射这些时，我会为它们分配一个密钥。

`{hostings.map((hosting) => (
<HostingCard key={hosting.id} hosting={hosting} setHosting={setHostings} />
))}`

每张卡片都有一个这样的标题"；Pro"标准"；以及"；基本"；。

我这样做是为了一旦点击一张卡片，就会出现一个新的组件。该组件被称为"；ContactFormula"；。

现在在"；ContactFormula"；组件我想显示被点击的卡片上的信息。这可能吗？

以下是点击卡片/按钮后打开新组件的代码：

import ContactFormular from './ContactFormular'
const HostingCard = ({post, handleSubmit, hosting, setHosting, showContactDialog, setShowContactDialog, ssl, setPro, pro, key}) => {
return (
<div className='noselect hosting-options'>
<input type="radio" id={post.acf.hosting} name="startup" />
<div className='card selected-card'>
<form onSubmit={handleSubmit}>
<label  for={post.acf.tilvalg} className='label'>
<div className='card-header'>
<h5>{hosting.acf.title}</h5>
<p>{hosting.acf.beskrivelse}</p>
</div>
<div className='pakke-detaljer'>
<div>
<p style={{display: hosting.acf.deltaljer ? 'block' : 'none'}}>{hosting.acf.deltaljer}</p>
</div>
</div>
<div className='button-header' onClick={() => setPro(false)}>
<button className='btn' onClick={() => setShowContactDialog(true)}>Vælg</button>
</div>
</label>
</form>
</div>
<ContactFormular key={hosting.id} post={post} hosting={hosting} setHosting={setHosting} showContact={showContactDialog} setShowContact={setShowContactDialog} handleSubmit={handleSubmit} ssl={ssl} pro={pro} setPro={setPro}/>
</div>
)
}

Answer 1

看起来您正在将showContactDialog作为参数传递，并使用它来决定是否显示这个新组件，对吗？这意味着您需要showContactDialog仅对您单击的那个为true，对其他的为false。即每个组件需要不同的状态变量。看起来您可能在所有组件之间共享相同的状态变量。除非你分享一个可复制的示例，否则无法判断