更改单个 div(即地图内)的状态，而不是更改地图内所有 div 的状态

Question

我有一个组件正在检查某些状态是真还是假。如果为真，我会显示一个<p>标签并隐藏一个<h3>.我正在从 gaphQL 查询中提取数据，因此有一个 map 方法，现在有三个<Card>'s如果我单击卡片并运行我的showFull函数，它会在所有元素上显示 p 标签，相反，我只想隔离它正在单击的特定标签。

这是我的组件

<Testimonials className="testimonaials">
{data.allDatoCmsTestimonial.edges.map(({ node: testimonial }) => (
<Card onClick={showFull} background={testimonial.testimonialImage.url}>      
{testimonialFull ? 
<p>{testimonial.fullLengthQuote}</p>
:
<h3>{testimonial.shortQuote}</h3>
}        
</Card>
))}
</Testimonials>

这是我的状态和功能

const [testimonialFull, setTestimonialFull] = useState(false)
const showFull  = () => {
setTestimonialFull(true)
}

试图亚历山大的回答。我现在遇到的问题是Cannot read property 'testimonialImage' of undefined

这是组件

const IndexPage = ({ data }) => {
const TestimonialCard = ({testimonial})=>{
const [showFull, setShowFull] = useState(false)
const handleClick = useCallback(()=>{
setShowFull(true)
//setShowFull(s=>!s)//If you want toggle behaviour
},[])
return <Card onClick={handleClick} background={testimonial.testimonialImage.url}>      
{showFull ? 
<p>{testimonial.fullLengthQuote}</p>
:
<h3>{testimonial.shortQuote}</h3>
}        
</Card>
}
return (
...

这是我在map函数中调用它的地方

...
return ( 
... (bunch of other jsx/html)        
<Testimonials className="testimonaials">
{data.allDatoCmsTestimonial.edges.map(({ node: testimonial }) => (
<TestimonialCard/>
))}
</Testimonials>
...

Answer 1

将卡片包装在自定义组件中

const TestimonialCard = ({testimonial})=>{
const [showFull, setShowFull] = useState(false)
const handleClick = useCallback(()=>{
setShowFull(true)
//setShowFull(s=>!s)//If you want toggle behaviour
},[])
return <Card onClick={handleClick} background={testimonial.testimonialImage.url}>      
{showFull ? 
<p>{testimonial.fullLengthQuote}</p>
:
<h3>{testimonial.shortQuote}</h3>
}        
</Card>
}