如何在React中为仅对作者可见的资源制作编辑/删除按钮

Question

我正在创建一个具有两种用户类型的项目（实际上不是两个不同的角色，因为它们是截然不同的，但一个没有另一个角色）。用户类型1可以进行审阅，并将其作为参考资源添加到其模式中用户类型2的审阅数组中，作为参考资源，该评论将填充在get请求中，该请求将在组件安装时触发并在react中呈现。

我想这样做，以便每个评论都呈现一个“编辑和删除”按钮，但仅对所述评论的作者可见。

目前，我有

class exampleClass extends React.Component {

{*** bunch of functions ***}

reviewMapper = (reviews) => {
     const reviewArray = reviews.map(review =>
     <div className="review-card">
         <Row>
              <Col className="review-author col-6">
                    <h4>Reviewer: { review.author }<h4>
              </Col>
         </Row>
         <Row>
              <Col className="review-content>
                    <h4> { review.review_text } </h4>
              </Col>

              {*** I want the buttons here to be visible only for the author of the review ***}

              <Button onClick={() => { this.props.editReview }}>Edit</Button>
              <Button onClick={() => { this.props.deleteReview }}>delete</Button>
         </Row>
     </div>
    );
    return reviewArray;
};

render() {
     return (
           <>
              <*** Renders some HTML ***>
              { this.props.user.reviews && this.reviewMapper(this.props.user.reviews) }
           </>
     )
}

const mapStateToProps= (state) => {
     some props: some props
}

export default connect(mapStateToProps, { some functions })(exampleClass);

Answer 1

没关系，我是个假人。

我在发布此=大约5分钟后就发现了这一点]

reviewMapper = (reviews) => {
     const currentUser = localStorage.getItem('uid')
     const reviewArray = reviews.map(review =>

     <div className="review-card">
         <Row>
              <Col className="review-author col-6">
                    <h4>Reviewer: { review.author }<h4>
              </Col>
         </Row>
         <Row>
              <Col className="review-content>
                    <h4> { review.review_text } </h4>
              </Col>

              { currentUser === review.author && this.reviewButtonMapper() }

         </Row>
     </div>
    );
    return reviewArray;
};

reviewButtonMapper = () => {
    return (
        <>
            <Button onClick={() => {}}>edit</Button>
            <Button onClick={() => {}}>delete</Button>
        </>
    );
};