我对React还不太熟悉,在这里有些迷茫。我正在从Firebase中加载数据,并使用.map函数呈现该对象的props,以列出页面上的所有“评论”,这很好用。我还想调用一个组件,使用户可以回复单个评论(即映射中的一个特定元素),但是由于此代码的预期,当单击回复按钮时,它会在映射的每个元素下显示被调用的组件,这是不可取的。在这种情况下,是否有任何方法可以仅为映射的一个元素调用组件?
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>
)
}