39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import React, { ReactElement, ReactNode } from 'react';
|
|
|
|
function renderAttributes(props: Record<string, any>): string {
|
|
return Object.keys(props)
|
|
.map((key) => {
|
|
const value = props[key];
|
|
if (key === 'children' || value === undefined || value === null) {
|
|
return '';
|
|
}
|
|
return `${key}="${value}"`;
|
|
})
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
}
|
|
|
|
function renderElement(element: ReactNode): string {
|
|
if (typeof element === 'string' || typeof element === 'number') {
|
|
return String(element);
|
|
}
|
|
|
|
if (React.isValidElement(element)) {
|
|
const { type, props } = element;
|
|
const mapped = React.Children.map(props.children, renderElement)
|
|
const cilds = mapped? mapped.join('') : props.children;
|
|
const attributes = renderAttributes(props);
|
|
return `<${type}${attributes ? ' ' + attributes : ''}>${cilds}</${type}>`;
|
|
}
|
|
|
|
if (Array.isArray(element)) {
|
|
return element.map(renderElement).join('');
|
|
}
|
|
|
|
return '';
|
|
}
|
|
|
|
export function jsxToString(element: JSX.Element): string {
|
|
console.log(element);
|
|
return renderElement(element);
|
|
} |