Как передавать в PropTypes 'элементы DOM?

Question

Я разрабатываю UI кит со сторибуком и среди прочих компонентов сделал стилизованные ссылки. Но чтобы отобразить их в storybook необходимо каким-то образом передать шаблоны этих ссылок элементы DOM. Сам компонент работает с атрибутом 'children' Я предполагаю что для валидации я должен использовать PropTypes.element но не очень понимаю, как должна выглядеть конфигурация шаблона в этом случае.

Код компонента:

import { Link } from "react-router-dom";
import tw from 'tailwind-styled-components'
import PropTypes from "prop-types";

import {FontWeight, TextSize} from "../enums/enums";

export const StyledNavLink = tw(Link)`
    ${(p) => (p.$primary ? "text-primary-dark" : "text-secondary-dark")}
    ${(p) => (p.$textSize)}
    ${(p) => (p.$fontWeight)}
    focus:outline-none
    `

const NavLink = ({primary, fontWeight, textSize, to, children}) => {
    return <StyledNavLink to={to} $primary={primary} $textSize={textSize} $fontWeight={fontWeight}>
        {children}
    </StyledNavLink>
}

export default NavLink

NavLink.propTypes = {
    primary:PropTypes.bool,
    fontWeight:PropTypes.oneOf(Object.values(FontWeight)),
    textSize:PropTypes.oneOf(Object.values(TextSize)),
    to:PropTypes.string
};

NavLink.defaultProps = {
    primary:true,
    fontWeight:FontWeight.NORMAL,
    textSize:TextSize.BASE,
    to:'/'
};

Код шаблона:

import React from 'react';
import NavLink from "./NavLink";

export default {
    title: 'ui/navLink/NavLink',
    component: NavLink,
    argTypes: {
        // backgroundColor: { control: 'color' },
    },
};

const Template = (args) => <NavLink {...args} />;

export const Primary = Template.bind({});
Primary.args = {
    primary: true
    // вот тут в качестве children: хочу подпихнуть строку, которая интерпретируется как DOM element 
};

export const Secondary = Template.bind({});
Secondary.args = {
    primary: false
};

Answer 1

Такой вариант сработал:

NavLink.propTypes = {
primary:PropTypes.bool,
fontWeight:PropTypes.oneOf(Object.values(FontWeight)),
textSize:PropTypes.oneOf(Object.values(TextSize)),
to:PropTypes.string,
children:PropTypes.element
};

...

const Template = (args) => <NavLink {...args} />;

export const Primary = Template.bind({});
Primary.args = {
    primary: true,
    children: 'Hello world'
};

Answer 2

Нет, это было неправильно. Нужно было в самом шаблоне добавить вложенные элементы:

const Template = args => <NavLink {...args}>Hello world</NavLink> ;

export const Primary = Template.bind({});
Primary.args = {
    primary: true
};

export const Secondary = Template.bind({});
Secondary.args = {
    primary: false
};

БЛОГ НА HUSL

Как передавать в PropTypes 'элементы DOM?

Ответы (2 шт):