Компонент набора текста реагирует машинопись

Question

Сценарий:

Я создаю текстовый компонент; в него встроен еще один компонент Tag.

Вопрос:

Как я могу набрать его, чтобы он работал? Теперь появляется ошибка, и она не принимает желаемые стили.

Ошибка заключается в следующем:

Type '{ children: ReactNode; classNames: any; }' is not assignable to type 'IntrinsicAttributes'. Property 'children' does not exist on type 'IntrinsicAttributes'.ts(2322)

Это мой код:

import React, { ReactNode } from 'react';
import styles from './Text.module.css';
import classNames from 'classnames/bind';

const cx = classNames.bind(styles);

interface ITextProps {
    variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p1' | 'p2' | 'p3';
    bold?: boolean;
}

const tags = {
    h1: 'h1',
    h2: 'h2',
    h3: 'h3',
    h4: 'h4',
    h5: 'h5',
    h6: 'h6',
    p1: 'p',
    p2: 'p',
    p3: 'p',
};

const Text: React.FC<ITextProps> = ({ children, variant, bold }) => {
    const Tag = tags[variant];

    return <Tag classNames={cx({ title: variant === 'h1' })}>{children}</Tag>;
};

export default Text;

Answer 1

Вам нужно добавить объявление типа для детей в ваш интерфейс, чтобы избавиться от этой ошибки. Правильный тип для детей - React.ReactNode - попробуйте изменить интерфейс к этому ...

interface ITextProps {
 children: React.ReactNode
 variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p1' | 'p2' | 'p3';
 bold?: boolean;
}

Answer 2

Использовать React.createElement

Создать и вернуть новый элемент React данного типа. Аргумент типа может быть либо
- строка имени тега (например, 'div' или 'span'),
- тип компонента React (класс или функция),
- или тип фрагмента React.

const Template = React.createElement(tags[variant], {}, children);

const App = () => {
  const tags = {
    h1: "h1",
    h2: "h2",
    h3: "h3",
    h4: "h4",
    h5: "h5",
    h6: "h6",
    p1: "p",
    p2: "p",
    p3: "p"
  };
  const Template = React.createElement(tags['h1'], {}, 'Text');
  return (
    <div className="App">
      {Template}
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>