React 中基于当前组件的条件渲染 state

Question

我正在努力弄清楚如何在 React 中实现条件渲染。 基本上，我想做的是：如果 reviewResponse 数组中有 reviewResponse，我就不想再呈现 reviewResponseForm。 我只想呈现 ReviewResponse。 换句话说，每条评论在这个应用程序中只能有一个回复。 我不确定在尝试实现此逻辑时我做错了什么。 我知道我需要实施某种条件语句，说明如果我的 reviewResponses 数组的长度大于 0，我需要呈现表单。 否则，我需要呈现该 reviwResponse。 我写的每一条陈述在这里都不起作用。 有人有建议吗？ 到目前为止，这是我的代码：

我的评论 cardDetails 组件呈现我的 ReviewResponseBox 组件并将特定的 reviewId 作为道具传递：

import React from "react";
import { useLocation } from "react-router-dom";
import StarRatings from "react-star-ratings";
import ReviewResponseBox from "../ReviewResponse/ReviewResponseBox";

const ReviewCardDetails = () => {
  const location = useLocation();
  const { review } = location?.state; // ? - optional chaining

  console.log("history location details: ", location);
  return (
    <div key={review.id} className="card-deck">
      <div className="card">
        <div>
          <h4 className="card-title">{review.place}</h4>
          <StarRatings
            rating={review.rating}
            starRatedColor="gold"
            starDimension="20px"
          />
          <div className="card-body">{review.content}</div>
          <div className="card-footer">
            {review.author} - {review.published_at}
          </div>
        </div>
      </div>
      <br></br>
       {/*add in conditional logic to render form if there is not a response and response if there is one*/} 
    <ReviewResponseBox review_id={review.id}/>

    </div>
  );
};

export default ReviewCardDetails;

然后最终我希望这个组件 ReviewResponseBox 确定是呈现 responseform 还是呈现 reviewresponse 本身（如果它已经存在）。

import React from 'react';
import ReviewResponse from './ReviewResponse';
import ReviewResponseForm from './ReviewResponseForm';

class ReviewResponseBox extends React.Component {
  constructor() {
    super()

    this.state = {
      reviewResponses: []
    };
  }
  
  render () {
    const reviewResponses = this.getResponses();
    const reviewResponseNodes = <div className="reviewResponse-list">{reviewResponses}</div>;
   

    return(
      <div className="reviewResponse-box">
        <ReviewResponseForm addResponse={this.addResponse.bind(this)}/>
       
        <h3>Response</h3>
        {reviewResponseNodes}
        
      </div>  
        
    );
  } 
  

  addResponse(review_id, author, body) {
    const reviewResponse = {
      review_id,
      author,
      body
    };
    this.setState({ reviewResponses: this.state.reviewResponses.concat([reviewResponse]) }); // *new array references help React stay fast, so concat works better than push here.
  }
   
  
  
  getResponses() {    
    return this.state.reviewResponses.map((reviewResponse) => { 
      return (
        <ReviewResponse 
          author={reviewResponse.author} 
          body={reviewResponse.body} 
          review_id={this.state.review_id} />
      ); 
    });
  }

  
  
}
export default ReviewResponseBox;

以下是 ReviewResponseForm 和 ReviewResponse 组件：

import React from "react";

class ReviewResponseForm extends React.Component {
  render() {
    return (
      <form className="response-form" onSubmit={this.handleSubmit.bind(this)}>
        <div className="response-form-fields">
          <input placeholder="Name" required ref={(input) => this.author = input}></input><br />
          <textarea placeholder="Response" rows="4" required ref={(textarea) => this.body = textarea}></textarea>
        </div>
        <div className="response-form-actions">
          <button type="submit">Post Response</button>
        </div>
      </form>
    );
  }
  
  handleSubmit(event) { 
    event.preventDefault();   // prevents page from reloading on submit
    let review_id = this.review_id
    let author = this.author;
    let body = this.body;
    this.props.addResponse(review_id, author.value, body.value);
  }
} 

export default ReviewResponseForm;

import React from 'react';

class ReviewResponse extends React.Component {
    render () {
      return(
        <div className="response">
          <p className="response-header">{this.props.author}</p>
          <p className="response-body">- {this.props.body}</p>
          <div className="response-footer">
            </div>
        </div>
      );
    }
  
  }
  export default ReviewResponse;
  

任何建议都会有所帮助，谢谢。

Answer 1

如果我正确理解您的问题，您希望在this.state.reviewResponses state 数组为空时呈现ReviewResponseForm 。

使用 truthy（非零）/falsey（零）数组长度属性有条件地呈现任一 UI 元素。

render () {
  const reviewResponses = this.getResponses();
  const reviewResponseNodes = <div className="reviewResponse-list">{reviewResponses}</div>;


  return(
    <div className="reviewResponse-box">
      {reviewResponses.length 
        ? (
          <>
            <h3>Response</h3>
            {reviewResponseNodes}
          </>
        )
        : (
          <ReviewResponseForm addResponse={this.addResponse.bind(this)}/>
        )}
    </div>  
    
  );
}