Arrays 如何通过onClick函数切换comments组件,react js
Arrays 如何通过onClick函数切换comments组件,react js,arrays,reactjs,components,toggle,map-function,Arrays,Reactjs,Components,Toggle,Map Function,import React,{Fragment,useffect,useState}来自'React'; 从'react redux'导入{connect}; 从'react router dom'导入{Link}; 从“道具类型”导入道具类型; 从“../redux/actions/@posts”导入{getPosts}; 从“../components/posts/PostItem”导入PostItem; 从“../components/posts/CommentForm”导入CommentF
import React,{Fragment,useffect,useState}来自'React';
从'react redux'导入{connect};
从'react router dom'导入{Link};
从“道具类型”导入道具类型;
从“../redux/actions/@posts”导入{getPosts};
从“../components/posts/PostItem”导入PostItem;
从“../components/posts/CommentForm”导入CommentForm;
从“../components/posts/Comment”导入注释;
导入“../styles/posts/postComponent.scss”;
常数员额=({
getPosts,
posts:{posts,isLoading},
我得到了认证,
用户
}) => {
useffect(()=>{
getPosts();
}, []);
const[show,toggleShow]=useState(false);
console.log(show);
const postsList=正在加载(
柱子正在装货
) : (
posts.map(post=>{
返回(
注释}
toggleShow={toggleShow}
show={show}
/>
{post.comments.map(
评论=>
展示&&(
)
)}
);
})
);
返回(
添加帖子
{postsList}
);
};
Posts.propTypes={
getPosts:PropTypes.func.isRequired,
posts:PropTypes.object.isRequired,
IsAuthentication:需要PropTypes.bool.isRequired
};
常量mapStateToProps=状态=>{
//log(state.posts.posts.map(post=>post.likes));
//console.log(状态);
返回{
职位:state.posts,
isAuthenticated:state.auth.isAuthenticated,
用户:state.auth.user
};
};
导出默认连接(mapStateToProps,{getPosts})(Posts)代码>请提供您尝试的代码请提供代码,以便人们更好地理解您的问题,并方便他们帮助您解决问题…您的语句不够简洁,无法为您提供解决方案使用一个show var,to to toggle会导致您的问题,我看到您的console.log您的show,所以,当你点击一个组件时,检查它的状态和所有组件的状态,我相信你会看到所有其他组件也显示更改状态是的,这正是发生的。所以我在每个注释中添加了一个显示状态。