我在一个项目中使用非常不同的标题。
- 我正在尝试将它们统一为一个组件
- 我正在尝试将语义(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 渲染的元素?
最佳答案
我觉得不错。同样的方法也用于改变状态以呈现不同的东西。
关于javascript - 如何根据 Prop 渲染不同的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52438636/