如何使用switch语句有条件地渲染React函数组件？

huangapple
go评论176阅读模式
英文:

How do I conditionally render react functional components with switch statement?

问题

I am trying to render a multipage form to display a particular page based on the step variable with a switch statement. To my dismay, nothing is coming out after the call that renders the switch statement am I missing something?

  1. 我正在尝试使用switch语句基于`step`变量来渲染多页表单，但令我沮丧的是，在渲染switch语句后没有任何内容出现，我是否漏掉了什么？

The Component below that is as follows:

  1. 下面的组件如下：

And the last component is:

  1. 最后一个组件如下：
英文:

I am trying to render a multipage form to display a particular page based on the step variable with a switch statement. To my dismay, nothing is coming out after the call that renders the switch statement am I missing something?

  1. import React, { useState } from "react";
  3. import { songValidationSchema } from "../../../../utilities/validation";
  4. import { Form } from "../../../../utilities/components/form";
  5. import SONG_CAPTURE_PROPERTIES from "../../../../utilities/constants/SongCaptureProperties";
  6. import { groupSongMetaProperties } from "../../../../utilities/functions";
  7. import SongDetailsPage from "./SongDetailsPage";
  9. import "./SongUpload.css";
  11. const SongUpload = () => {
  12.   const [step, setStep] = useState(1);
  14.   const groupedSongMetaProperties = groupSongMetaProperties(
  15.     SONG_CAPTURE_PROPERTIES,
  16.     4 // Into arrays of max length of 4.
  17.   );
  19.   const initialValues = {
  20.     song: "",
  21.     art: "",
  22.     trackName: "",
  23.     genre: "",
  24.     album: "",
  25.     artist: "",
  26.     publisher: "",
  27.     recordLabel: "",
  28.     releaseYear: "",
  29.     copyrightMessage: "",
  30.     subtittle: "",
  31.     comment: "",
  32.     unsynchronisedLyric: "",
  33.   };
  35.   const nextStep = () => setStep(step + 1);
  36.   const previousStep = () => setStep(step - 1);
  38.   const handleSubmit = (values) => console.log("Form Data: ", values);
  40.   const renderSongDetailPage = () => {
  41.     switch (step) {
  42.       case 1:
  43.         return (
  44.           <SongDetailsPage
  45.             inputNames={groupedSongMetaProperties[0]}
  46.             nextStep={nextStep}
  47.             previousStep={previousStep}
  48.           />
  49.         );
  50.       case 2:
  51.         return (
  52.           <SongDetailsPage
  53.             inputNames={groupedSongMetaProperties[1]}
  54.             nextStep={nextStep}
  55.             previousStep={previousStep}
  56.           />
  57.         );
  58.       case 3:
  59.         return (
  60.           <SongDetailsPage
  61.             inputNames={groupedSongMetaProperties[2]}
  62.             nextStep={nextStep}
  63.             previousStep={previousStep}
  64.           />
  65.         );
  66.       case 4:
  67.         return (
  68.           <SongDetailsPage
  69.             inputNames={groupedSongMetaProperties[3]}
  70.             nextStep={nextStep}
  71.             previousStep={previousStep}
  72.           />
  73.         );
  74.     }
  75.   };
  77.   return (
  78.     <Form
  79.       initialValues={initialValues}
  80.       onSubmit={handleSubmit}
  81.       validationSchema={songValidationSchema}
  82.     >
  83.       <h1>SongUpload</h1>
  84.       <h3>Upload Your Songs here!</h3>
  86.       {renderSongDetailPage() // This is the function calling the switch Render.} 
  87.     </Form>
  88.   );
  89. };
  90. export default SongUpload;

The Component below that is as follows:

  1. import React from "react";
  3. import { FormInput } from "../../../common/forms/form";
  5. const SongDetailsPage = ({ inputNames, nextStep, previousStep, step }) => {
  6.   const getInputType = (str, step) => {
  7.     let type = "";
  8.     switch (step) {
  9.       case 1:
  10.         switch (str) {
  11.           case "song_file":
  12.             type = "file";
  13.             break;
  14.           case "song_art":
  15.             type = "image";
  16.             break;
  17.           case "track_name":
  18.             type = "text";
  19.             break;
  20.           case "genre":
  21.             type = "text";
  22.             break;
  23.           default:
  24.             type = null;
  25.             break;
  26.         }
  27.         break;
  28.       case 2:
  29.         type = "text"; // Since all fields need text in this group
  30.         break;
  31.       case 3:
  32.         switch (str) {
  33.           case "release_year":
  34.             type = "date";
  35.             break;
  36.           case "subtittle":
  37.             type = "text";
  38.             break;
  39.           default:
  40.             type = null;
  41.             break;
  42.         }
  43.         break;
  44.       case 4:
  45.         // case "unsynchronised_lyric": -> The only case in the last one
  46.         type = null;
  47.     }
  49.     return type;
  50.   };
  52.   if (inputNames == null) return;
  53.   else
  54.     return (
  55.       <span className="input-wrapper">
  56.         {inputNames.map((key, index) => {
  57.           const type = getInputType(inputNames[index], step);
  58.           if (type !== null)
  59.             <span key={key}>
  60.               <FormInput
  61.                 label={inputNames[index]}
  62.                 name={
  63.                   inputNames[index] === "song_file"
  64.                     ? "song"
  65.                     : inputNames[index] === "song_art"
  66.                     ? "art"
  67.                     : inputNames[index] === "track_name"
  68.                     ? "trackName"
  69.                     : inputNames[index]
  70.                 }
  71.                 type={type}
  72.               />
  73.               ;
  74.             </span>;
  75.           else <span key={key}> Yo! </span>;
  76.         })}
  77.       </span>
  78.     );
  79. };
  81. export default SongDetailsPage;

And the last component is:

  1. import { faEye, faEyeLowVision } from "@fortawesome/free-solid-svg-icons";
  2. import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  3. import React, { useEffect, useRef, useState } from "react";
  5. import "./Form.css";
  7. const FormInput = ({
  8.   accept,
  9.   icon,
  10.   id,
  11.   label,
  12.   onBlur,
  13.   onChange,
  14.   name,
  15.   type,
  16.   ...otherProps
  17. }) => {
  18.   const [passwordRevealed, setPasswordRevealed] = useState(false);
  20.   const inputElement = useRef(null);
  21.   const labelElement = useRef(null);
  23.   useEffect(() => {
  24.     // input-in-focus css class moves the label out of the field and shrinks it
  25.     if (inputElement.current.value !== "") {
  26.       labelElement.current.classList.add("input-in-focus");
  27.     }
  28.   });
  30.   const handleRevealPassword = () => {
  31.     setPasswordRevealed(!passwordRevealed);
  32.     if (!passwordRevealed) type = "text";
  33.     else type = "password";
  34.     inputElement.current.type = type;
  35.   };
  37.   const handleFocus = () => {
  38.     if (
  39.       document.activeElement === inputElement.current ||
  40.       inputElement.current.value !== ""
  41.     )
  42.       labelElement.current.classList.add("input-in-focus");
  43.     else labelElement.current.classList.remove("input-in-focus");
  44.   };
  46.   const handleBlur = (e) => {
  47.     if (e.target.type === "file") return;
  48.     handleFocus();
  49.     onBlur(e);
  50.   };
  52.   return (
  53.     <div className="form-input-container">
  54.       {icon && (
  55.         <span className="label-icon-container">
  56.           <FontAwesomeIcon
  57.             className="form-input-icon"
  58.             // color={defaultStyles.colors.tomato}
  59.             icon={icon}
  60.             size="lg"
  61.           />
  62.         </span>
  63.       )}
  65.       <label>
  66.         <p ref={labelElement}>{label}</p>
  67.         <input
  68.           accept={accept}
  69.           id={id}
  70.           name={name}
  71.           onFocus={handleFocus}
  72.           onBlur={handleBlur}
  73.           onChange={onChange}
  74.           ref={inputElement}
  75.           type={type}
  76.           {...otherProps}
  77.         />
  78.       </label>
  80.       {type === "password" && (
  81.         <span className="upendi-password-eye">
  82.           <FontAwesomeIcon
  83.             className="password-eye"
  84.             // color={defaultStyles.colors.tomato}
  85.             icon={passwordRevealed ? faEyeLowVision : faEye}
  86.             onClick={handleRevealPassword}
  87.             size="lg"
  88.             title={
  89.               passwordRevealed
  90.                 ? "Click To Hide Password"
  91.                 : "Click To Reveal Password"
  92.             }
  93.           />
  94.         </span>
  95.       )}
  96.     </div>
  97.   );
  98. };
  100. export default FormInput;

答案1

得分: 2

I'm not 100% sure about the validity of this suggestion so others should weigh in. But in order to achieve what you want, you will need to return a function instead of jsx from your renderSongDetailPage and pass the props as an object to the component. Then call renderSongDetailPage as a jsx element. Remember that renderSongDetailPage needs to RenderSongDetailPage with a capital R.

  1. const RenderSongDetailPage = () => {
  2.   switch (step) {
  3.     case 1:
  4.       return SongDetailsPage({
  5.         inputNames: groupedSongMetaProperties[0],
  6.         nextStep: nextStep,
  7.         previousStep: previousStep,
  8.       });
  9.     case 2:
  10.       return SongDetailsPage({
  11.         inputNames: groupedSongMetaProperties[1],
  12.         nextStep: nextStep,
  13.         previousStep: previousStep,
  14.       });
  15.     case 3:
  16.       return SongDetailsPage({
  17.         inputNames: groupedSongMetaProperties[2],
  18.         nextStep: nextStep,
  19.         previousStep: previousStep,
  20.       });
  21.     case 4:
  22.       return SongDetailsPage({
  23.         inputNames: groupedSongMetaProperties[3],
  24.         nextStep: nextStep,
  25.         previousStep: previousStep,
  26.       });
  27.   }
  28. };

Usage :

  1. <RenderSongDetailPage/>

If I can make a suggestion through observation. The only thing changing in that RenderSongDetailPage function is the array item for groupedSongMetaProperties so you could possible just render in the main return as follows :

  1. <SongDetailsPage
  2.   inputNames={groupedSongMetaProperties[step-1]}
  3.   nextStep={nextStep}
  4.   previousStep={previousStep}
  5. />;

which should give you the same results. Although I do not know the entire extent of your project so just a suggestion.

Ultimately what you would see in the wild is just a bunch of if statements each returning a SongDetailsPage

A code sandbox : https://codesandbox.io/s/jolly-gagarin-n66xp9?file=/src/App.js

英文:

I'm not 100% sure about the validity of this suggestion so others should weigh in. But in order to achieve what you want, you will need to return a function instead of jsx from your renderSongDetailPage and pass the props as an object to the component. Then call renderSongDetailPage as a jsx element. Remember that renderSongDetailPage needs to RenderSongDetailPage with a capital R.

  1. const RenderSongDetailPage = () =&gt; {
  2.   switch (step) {
  3.     case 1:
  4.       return SongDetailsPage({
  5.         inputNames: groupedSongMetaProperties[0],
  6.         nextStep: nextStep,
  7.         previousStep: previousStep,
  8.       });
  9.     case 2:
  10.       return SongDetailsPage({
  11.         inputNames: groupedSongMetaProperties[1],
  12.         nextStep: nextStep,
  13.         previousStep: previousStep,
  14.       });
  15.     case 3:
  16.       return SongDetailsPage({
  17.         inputNames: groupedSongMetaProperties[2],
  18.         nextStep: nextStep,
  19.         previousStep: previousStep,
  20.       });
  21.     case 4:
  22.       return SongDetailsPage({
  23.         inputNames: groupedSongMetaProperties[3],
  24.         nextStep: nextStep,
  25.         previousStep: previousStep,
  26.       });
  27.   }
  28. };

Usage :

  1. &lt;RenderSongDetailPage/&gt;

If I can make a suggestion through observation. The only thing changing in that RenderSongDetailPage function is the array item for groupedSongMetaProperties so you could possible just render in the main return as follows :

  1. &lt;SongDetailsPage
  2.   inputNames={groupedSongMetaProperties[step-1]}
  3.   nextStep={nextStep}
  4.   previousStep={previousStep}
  5. /&gt;;

which should give you the same results. Although I do not know the entire extent of your project so just a suggestion.

Ultimately what you would see in the wild is just a bunch of if statements each returning a SongDetailsPage

A code sandbox : https://codesandbox.io/s/jolly-gagarin-n66xp9?file=/src/App.js

答案2

得分: 0

The issue was in the SongDetailsPage component. I was not returning inside each map iteration.

英文:

The issue was in the SongDetailsPage component. I was not returning inside each map iteration.

  1. import {
  2.   faCalendar,
  3.   faComment,
  4.   faCompactDisc,
  5.   faCopyright,
  6.   faFileAudio,
  7.   faFileWord,
  8.   faGuitar,
  9.   faImage,
  10.   faMusic,
  11.   faNewspaper,
  12.   faPenToSquare,
  13.   faRecordVinyl,
  14.   faUser,
  15. } from &quot;@fortawesome/free-solid-svg-icons&quot;;
  16. import React from &quot;react&quot;;
  18. import { FormInput } from &quot;../../../../utilities/components/form&quot;;
  20. const SongDetailsPage = ({ inputNames, step }) =&gt; {
  21.   const getInputType = (str, step) =&gt; {
  22.     switch (step) {
  23.       case 1:
  24.         switch (str) {
  25.           case &quot;song_file&quot;:
  26.             return &quot;file&quot;;
  28.           case &quot;song_art&quot;:
  29.             return &quot;image&quot;;
  31.           default:
  32.             return &quot;text&quot;;
  33.         }
  35.       case 2:
  36.         return &quot;text&quot;; // Since all fields need text in this group
  38.       case 3:
  39.         switch (str) {
  40.           case &quot;release_year&quot;:
  41.             return &quot;date&quot;;
  43.           case &quot;subtitle&quot;:
  44.             return &quot;text&quot;;
  46.           default:
  47.             return null;
  48.         }
  49.       case 4:
  50.         // case &quot;unsynchronised_lyric&quot;: -&gt; The only case in the last one
  51.         return null;
  52.     }
  53.   };
  55.   if (!inputNames) return;
  56.   else
  57.     return (
  58.       &lt;&gt;
  59.         {inputNames.map((key, index) =&gt; {
  60.           const type = getInputType(inputNames[index], step);
  61.           return ( // &lt;- This return statement was the issue.
  62.             ...
  63.           );
  64.         })}
  65.       &lt;/&gt;
  66.     );
  67. };
  69. export default SongDetailsPage;

huangapple
  • 本文由 发表于 2023年1月4日 09:38:57
  • 转载请务必保留本文链接：https://go.coder-hub.com/75000201.html
  • javascript
  • node.js
  • react-functional-component
  • react-hooks
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定