我正在尝试在我的项目页面（反应 js）投资组合中实施 "Read more" link

Question

因此，当用户点击某个特定项目的“阅读更多”时，它应该展开对它的描述。它有效，但每当我点击一个项目的“阅读更多”时，它也会扩展所有其他项目的描述。我只想要被点击的特定项目的描述。

请在下面找到代码片段


                <PortfolioContainer>
                    <SingleProjectContainer>
                        {projectData.map((singleProject)=>{
                        const {title, description, id} = singleProject;
                        const lessDescription = description.slice(0,100) + "....";
                        return (
                            
                                <div className="cardStyled" key={id}>
                                    
                                    <ProjectName>{title}</ProjectName>
                                    
                                    
                                        {readMore ? <ProjectDescription>{description}</ProjectDescription>: <ProjectDescription>{lessDescription}</ProjectDescription>}
                                        
                                    </div>
                                    
                                    <span className="test" onClick={functionToggle}>{readMore ? "read less" : "read more"}</span>
                                    </div>
                                    
                                </div>
                                
                            
                                
                        );
                    })}
                    </SingleProjectContainer>
                    
                </PortfolioContainer>

这是切换功能

const functionToggle = ()=>{
        setReadMore(!readMore);
    }

非常感谢

Answer 1

在您的 map 方法中，readMore 应用于所有循环项目。您需要在三元运算符中添加另一个案例，以便不仅检查您是否处于阅读更多模式，而且当前标题是否与您需要扩展的文章匹配。

<span className="test" onClick={() => functionToggle(title)}>{readMore ? "read less" : "read more"}</span>

然后向您的状态添加一个新变量

const [ currentFocusedTitle, setCurrentFocusedTitle] = useState(null)

const functionToggle = (title)=>{
        setReadMore(!readMore);
        setCurrentFocusedTitle(title);
    }

然后

 {readMore && currentFocusedTitle === title ? <ProjectDescription>{description}</ProjectDescription>: <ProjectDescription>{lessDescription}</ProjectDescription>}

我正在尝试在我的项目页面（反应 js）投资组合中实施 "Read more" link

I'm trying to implement a "Read more" link in my projects page (react js) portfolio

portfolio

toggle

reactjs

use-state