javascript - 如何根据 Prop 渲染不同的元素？

Question

我在一个项目中使用非常不同的标题。

• 我正在尝试将它们统一为一个组件
• 我正在尝试将语义(h1、h2、...)与外观分离

这是当前的样子(正在进行中)

import * as React from 'react';
import './Heading.css';
import { MarkupContent } from 'app-types';
import HeadingElement from './HeadingElement';

interface HeadingProps {
    type: 'fullwidth' | 'emphasis';
    children: MarkupContent;
    element: 'h1' | 'h2';
}

function Heading(props: HeadingProps) {
    switch (props.type) {
        case 'fullwidth':
            return (
                <div className="big-heading-container">
                    <div className="big-heading-section">
                        <HeadingElement element={props.element} classes="big-heading-text">
                            {props.children}
                        </HeadingElement>
                    </div>
                </div>
            );
        case 'emphasis':
            return (
                <h2 className="heading--emphasized">
                    {props.children}
                </h2>
            );
        default:
            return (
                <></>
            );
    }
}

export default Heading;

import * as React from 'react';
import { MarkupContent } from 'app-types';

interface HeadingElementProps {
    element: 'h1' | 'h2';
    classes: string;
    children: MarkupContent;
}

function HeadingElement(props: HeadingElementProps) {
    switch (props.element) {
        case 'h1':
            return (
                <h1 className={props.classes}>{props.children}</h1>
            );
        case 'h2':
            return (
                <h2 className={props.classes}>{props.children}</h2>
            );
        default:
            return (
                <></>
            );
    }
}

export default HeadingElement;

@import "../../parameters.scss";

.big-heading {
    &-container {
        padding: 90px 25px 0 25px;
        background-image: url("../../images/heading-background.png");
        border-bottom: 1px solid $green;
    }

    &-section {
        max-width: $max-width;
        margin: 0 auto 0 auto;
        display: flex;   
    }

    &-text {
        font-size: 1.5rem;
        text-transform: uppercase;
        border-bottom: 4px solid $green;
        padding: 0 0 15px 0;
        display: inline; 
    }
}

  .heading--emphasized {
    font-size: 1.7rem;
    line-height: 2.0rem;
    font-weight: bold;
    text-transform: uppercase;
    display: inline;
    border-top: solid 4px #94d500;
    padding-top: 10px;
    padding-right: 30px; 
}

我对 switch 语句特别感兴趣，在该语句中我返回一个或元素并传递给 props.children。

这是一个好的方法还是有更好的方法来切换基于 Prop 渲染的元素？

Answer 1

我觉得不错。同样的方法也用于改变状态以呈现不同的东西。