如何只隐藏/显示使用某个State的特定组件，而不影响使用相同State的其他组件?

Question

我正在尝试创建一个简单的网站，通过一个名为Data的数组映射。这个数组有很多对象和很长的文本。

const [click,setClick] = useState(false)
{Data.Data.map((data, index) =>{
return(
<Content>
<p className="first-content">
<BigContainer imgStart={data.imgStart}>
<Wrapper key={index}>
<Solution>{data.Solution}</Solution>
<Client>{data.Client}</Client>
<ShowText>{data.ShowText}</ShowText>
<HideTextWrapper NeedToHide={data.NeedToHide} >
<HiddenText click={click}>
{data.HiddenText}
</HiddenText>
<ReadButton NeedButton={data.NeedButton} click={click} onClick={()=>{setClick(!click)}}>
{ click ? 'Read Less' : 'Read More' }
</ReadButton>
</HideTextWrapper>
</Wrapper>
<ImageWrapper>
<Image src={data.img} NeedImage={data.NeedImage}/>   
</ImageWrapper>
</BigContainer>
</p>
</Content>
)}

我想创建"read more"/"read less"按钮，其中<ReadButton>隐藏/显示<HiddenText>。正如你所看到的，我使用的useStateclick将被<ReadButton>改变。然后，我用样式组件改变了<HiddenText>显示。

export const HiddenText = styled.div`
line-height: 1.5;
font-size: 17px;
color: #fff;
background: blue;
display: ${({click}) =>(click ?  'block' : 'none' )};
`

问题是我只想点击<HiddenText>隐藏，但现在它影响所有其他<HiddenText>，因为它使用相同的click。你知道怎么解决这个问题吗?

Answer 1

我认为你的组件太大了。创建更小的组件，你就可以自己解决问题了。

但是为了快速修复它，你可以按这个方向重构(未测试)一定要给它起个合适的名字。我不知道你的域名

{Data.Data.map((data, index) =>{
return(
<Content key={index}>
<YourDataComponent data={data} />
</Content>
)}

则yourdataccomponent是这样的:

const [click,setClick] = useState(false);    
return (<p className="first-content">
<BigContainer imgStart={data.imgStart}>
<Wrapper key={index}>
<Solution>{data.Solution}</Solution>
<Client>{data.Client}</Client>
<ShowText>{data.ShowText}</ShowText>
<HideTextWrapper NeedToHide={data.NeedToHide} >
<HiddenText click={click}>
{data.HiddenText}
</HiddenText>
<ReadButton NeedButton={data.NeedButton} click={click} onClick={()=>{setClick(!click)}}>
{ click ? 'Read Less' : 'Read More' }
</ReadButton>
</HideTextWrapper>
</Wrapper>
<ImageWrapper>
<Image src={data.img} NeedImage={data.NeedImage}/>   
</ImageWrapper>
</BigContainer>
</p>)

你创建更小的组件不应该害怕,他们是你的朋友。作为建议，我将为read more行为创建一个单独的组件。

Answer 2

创建具有自己状态的子组件

const Content = () => {
const { text } = props;
const [show, setShow] = useState(false);
const toggle = () => setShow(!show); // Change state show true/false
return (
<HideTextWrapper>
{show && <HiddenText onClick={toggle}>{text}</HiddenText>}
<ReadButton NeedButton={show} onClick={toggle}>
{show ? "Read Less" : "Read More"}
</ReadButton>
</HideTextWrapper>
);
};

在数组渲染内容

{items.map((data, index) => <Content key={index} text={data.HiddenText} />)}

Answer 3

试试用useState钩子做这个。

const [click,setClick] = useState(false);
const [hidden,setHidden] = useState(false);

返回块:

return (
{ click && (
return (
<div>
*** if click is true, render this code block***
</div>  
)}
)

它看起来有点奇怪，但是你所做的是告诉返回块，如果click为真，渲染在&;{}&;之间的东西。如果你想在click为false时渲染其他内容，你可以对!click做同样的操作。当然，你需要点击和隐藏的切换逻辑，可以像这样简单:

<button onClick={(e)=> setClick(!click)}> Toggle click state </button>