切换大小写以在 JSX 上渲染多个组件

Question

我有条件地渲染一些组件，但我想知道是否有更有效的方法（例如，使用 switch case）：

     export const Culture = () => {
      const { query } = useRouter();
      const currentSection = query.section || "";
      return (
        <div className="content">
          <Navigation
            className={currentSection !== "" ? "sub_nav" : "sub_nav active_menu"}
            category="culture"
          />
          {currentSection === "" && <CultureCulture category="cultureCulture" />}
          {currentSection === "elephant" && (
            <CultureCulture category="cultureElephant" />
          )}
          {(currentSection === "espace-musee" ||
            currentSection === "quebecor-gallery") && (
            <CultureCulture category="cultureGallery" />
          )}
          {currentSection === "culture-d-ici" && (
            <CultureCulture category="cultureIci" />
          )}
          {(currentSection === "bilan-culturel" ||
            currentSection === "culture-report") && (
            <CultureCulture category="cultureReport" />
          )}
        </div>
      );
    };
    export default Culture;

Answer 1

switch-case实际上，您可以在单独的函数中使用块来渲染它们。

export const Culture = () => {
    const { query } = useRouter();
    const currentSection = query.section || "";

    const renderCurrentSelection = () => {
        switch (currentSection) {
            case "":
                return <CultureCulture category="cultureCulture" />;
            case "elephant":
                return <CultureCulture category="cultureElephant" />;
            case "espace-musee":
            case "quebecor-gallery":
                return <CultureCulture category="cultureGallery" />;
            case "culture-d-ici":
                return <CultureCulture category="cultureIci" />;
            case "bilan-culturel":
            case "culture-report":
                return <CultureCulture category="cultureReport" />;
            default:
                return null;
        }
    };

    return (
        <div className="content">
            <Navigation
                className={
                    currentSection !== "" ? "sub_nav" : "sub_nav active_menu"
                }
                category="culture"
            />
            {renderCurrentSelection()}
        </div>
    );
};
export default Culture;