作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我对 react 有点陌生,对在这里做什么有点迷茫。我正在从 firebase 加载数据并使用 .map 函数渲染该对象的 Prop 以列出页面上的所有“评论”,效果很好。我还想调用一个允许用户回复单个评论的组件(即 map 中的一个特定元素),但正如此代码所预期的那样,当点击回复按钮时,它会在每个元素下显示被调用的组件 map ,这是不可取的。在这种情况下,无论如何我可以为 map 的一个元素调用组件吗?
changeIsReply() {
this.setState(
{isReply: !this.state.isReply,}
);
}
render() {
return (
<div>
<ul className="list-group">
{Object.values(this.props.commentInfo).map((data) =>
data.map((secondData, i) =>
<div className="commentHolder" key={i}>
<p>{secondData.text}</p>
<p>{secondData.category}</p>
<p>{secondData.organization}</p>
<button> UpButton </button> <br />
<button> DownButton </button>
<button onClick = {this.changeIsReply} > Reply </button>
{this.state.isReply ? <SetComment id={secondData.key} /> : null}
</div>
)
)}
</ul>
</div>
)
}
最佳答案
那是因为您对所有评论使用单一状态。
<button onClick = {() => this.changeIsReply(secondData.key)} > Reply </button>
{this.state.isReply && this.state.clickedComment == {secondData.key} ? <SetComment id={secondData.key} /> : null}
并将您的 changeIsReply()
更改为:
changeIsReply(clickedId) {
this.setState({
isReply: !this.state.isReply,
clickedComment: clickedId
});
}
看看这是否有效。不要忘记将新状态添加到构造函数中。
关于javascript - 如何只修改 react .map 函数中的一个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44427203/
我是一名优秀的程序员,十分优秀!