反应组件中的条件可见性

Question

我有一个反应组件，其中包含一个 div 具有条件可见性。该组件表示电子商务中特定产品的页面。用户只能发表一次意见。具有条件可见性的 div 包含一个文本区域来写这个意见。但它应该只在用户尚未撰写评论时可见。这个决定必须在加载组件之前做出。我该怎么做？

这是组件：

import Axios from "axios";
import React, { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import NavbarHome from "./NavbarHome";

function Product() {
  //Visivility of the form

  
  let visibility = false;
  useEffect(() => {
    Axios.get("http://localhost:3001/review").then((response) => {
      if (response.data.length === 0) {
        visibility = true;
      }
    });
  }, []);

  const idprod = useParams();
  
  //POST of the review
  function handleSubmit(event) {
    event.preventDefault();
    let info = {
      message: event.target.review.value,
      rating: event.target.stars.value
    };
    if (!info.message || !info.rating) {
      if (!info.message) {
        alert("You haven't witten a review");
      } else if (!info.rating) {
        alert("You haven't give any stars");
      }
    } else {
      Axios.post("http://localhost:3001/review", {
        message: info.message,
        rating: info.rating,
        id_prod: idprod
      }).then((response) => {
        if (response.data.err) {
          alert("You have already written a review for this product");
        }
      });
    }
  }
  return (
    <div>
      <NavbarHome />
      <div className="container-fluid" id="container-producto">
        <div className="row">

          <div className="col-sm-6 bloque-description-product">
            <h2>Example</h2>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
          </div>
        
        </div>

        <h4>Opinions</h4>
        <div className="container-opinions">
          {visibility ? (
            <form onSubmit={handleSubmit}>
              <p className="clasification">
                <input id="radio1" type="radio" name="stars" value="5" />
                <label htmlFor="radio1">★</label>
                <input id="radio2" type="radio" name="stars" value="4" />
                <label htmlFor="radio2">★</label>
                <input id="radio3" type="radio" name="stars" value="3" />
                <label htmlFor="radio3">★</label>
                <input id="radio4" type="radio" name="stars" value="2" />
                <label htmlFor="radio4">★</label>
                <input id="radio5" type="radio" name="stars" value="1" />
                <label htmlFor="radio5">★</label>
              </p>
              <textarea
                name="review"
                placeholder="Leave your review..."
              ></textarea>
              <input type="submit"></input>
            </form>
          ) : (
            <div></div>
          )}
        </div>
      </div>
    </div>
  );
}

export default Product;

具有条件可见性的div是container-opinions。

我已经尝试在该容器上使用 onLoad，但它不起作用。

有什么想法吗？

Answer 1

您需要使用 useState 反应挂钩以您的应用可以反应的方式跟踪可见性：

import Axios from "axios";
import React, { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import NavbarHome from "./NavbarHome";

function Product() {
  //Visivility of the form
  // THIS NEEDS TO BE useState
  const [visibility, setVisibility] = useState(false)
  
  useEffect(() => {
    Axios.get("http://localhost:3001/review").then((response) => {
      if (response.data.length === 0) {
        // Use setVisibility to update the state
        setVisibility(true);
      }
    });
  }, []);

  const idprod = useParams();
  
  //POST of the review
  function handleSubmit(event) {
    event.preventDefault();
    let info = {
      message: event.target.review.value,
      rating: event.target.stars.value
    };
    if (!info.message || !info.rating) {
      if (!info.message) {
        alert("You haven't witten a review");
      } else if (!info.rating) {
        alert("You haven't give any stars");
      }
    } else {
      Axios.post("http://localhost:3001/review", {
        message: info.message,
        rating: info.rating,
        id_prod: idprod
      }).then((response) => {
        if (response.data.err) {
          alert("You have already written a review for this product");
        }
      });
    }
  }
  return (
    <div>
      <NavbarHome />
      <div className="container-fluid" id="container-producto">
        <div className="row">

          <div className="col-sm-6 bloque-description-product">
            <h2>Example</h2>
            <p>Example</p>
            <p>Example</p>
            <p>Example</p>
          </div>
        
        </div>

        <h4>Opinions</h4>
        <div className="container-opinions">
          {visibility ? (
            <form onSubmit={handleSubmit}>
              <p className="clasification">
                <input id="radio1" type="radio" name="stars" value="5" />
                <label htmlFor="radio1">★</label>
                <input id="radio2" type="radio" name="stars" value="4" />
                <label htmlFor="radio2">★</label>
                <input id="radio3" type="radio" name="stars" value="3" />
                <label htmlFor="radio3">★</label>
                <input id="radio4" type="radio" name="stars" value="2" />
                <label htmlFor="radio4">★</label>
                <input id="radio5" type="radio" name="stars" value="1" />
                <label htmlFor="radio5">★</label>
              </p>
              <textarea
                name="review"
                placeholder="Leave your review..."
              ></textarea>
              <input type="submit"></input>
            </form>
          ) : (
            <div></div>
          )}
        </div>
      </div>
    </div>
  );
}

export default Product;

Answer 2

你应该用 react 状态改变 let 变量

import Axios from "axios";
import React, { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import NavbarHome from "./NavbarHome";

    function Product() {
      const [visibility, setVisibility] = useState(false)
      
      useEffect(() => {
        Axios.get("http://localhost:3001/review").then((response) => {
          if (response.data.length === 0) {
            setVisibility(true);
          }
        });
      }, []);
    
      const idprod = useParams();
      
      //POST of the review
      function handleSubmit(event) {
        event.preventDefault();
        let info = {
          message: event.target.review.value,
          rating: event.target.stars.value
        };
        if (!info.message || !info.rating) {
          if (!info.message) {
            alert("You haven't witten a review");
          } else if (!info.rating) {
            alert("You haven't give any stars");
          }
        } else {
          Axios.post("http://localhost:3001/review", {
            message: info.message,
            rating: info.rating,
            id_prod: idprod
          }).then((response) => {
            if (response.data.err) {
              alert("You have already written a review for this product");
            }
          });
        }
      }
      return (
        <div>
          <NavbarHome />
          <div className="container-fluid" id="container-producto">
            <div className="row">
    
              <div className="col-sm-6 bloque-description-product">
                <h2>Example</h2>
                <p>Example</p>
                <p>Example</p>
                <p>Example</p>
              </div>
            
            </div>
    
            <h4>Opinions</h4>
            <div className="container-opinions">
              {visibility ? (
                <form onSubmit={handleSubmit}>
                  <p className="clasification">
                    <input id="radio1" type="radio" name="stars" value="5" />
                    <label htmlFor="radio1">★</label>
                    <input id="radio2" type="radio" name="stars" value="4" />
                    <label htmlFor="radio2">★</label>
                    <input id="radio3" type="radio" name="stars" value="3" />
                    <label htmlFor="radio3">★</label>
                    <input id="radio4" type="radio" name="stars" value="2" />
                    <label htmlFor="radio4">★</label>
                    <input id="radio5" type="radio" name="stars" value="1" />
                    <label htmlFor="radio5">★</label>
                  </p>
                  <textarea
                    name="review"
                    placeholder="Leave your review..."
                  ></textarea>
                  <input type="submit"></input>
                </form>
              ) : (
                <div></div>
              )}
            </div>
          </div>
        </div>
      );
    }
    
    export default Product;

反应组件中的条件可见性

Conditional visibility in a react component

javascript

visibility

reactjs