如何根据道具渲染不同的元素？

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的or元素。

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

Answer 1

在我看来很好。 相同的方法还用于更改状态以呈现不同的内容。

Answer 2

如果props.element只能是“ h1”或“ h2”（两个可能的值），我宁愿使用三进制条件语句，而不是switch语句。 这样的东西看起来更好吗？

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