Как правильно создать компонент React по имени
У меня есть файл с экспортом некоторых классов (компонентов реагирования), и у меня есть строка, которая содержит имя класса в виде строки. Поэтому мне нужно создать и визуализировать компонент по его имени.
Мой вариант:
import * as Formatter from "@/src/component/Formatter"
function isFormatterKey(key: string): key is keyof typeof Formatter {
return Formatter.hasOwnProperty(key);
}
function getFormatter(type: string, name: string, meta: JsonApiMetaAttributeType): React.Component {
let formatterName = capitalizeFirstLetter(meta[type][name].type) + 'Formatter'
if (!isFormatterKey(formatterName)) {
formatterName = 'StringFormatter'
}
return Formatter[formatterName]
}
{
Object.keys(item.attributes).map((attrName: string) => {
const FormatterComponent = getFormatter(item.type, attrName, meta)
return (
<td key = {"data-cell-" + attrName}>
<FormatterComponent>
{item.attributes[attrName]}
</FormatterComponent2>
</td>
)
})
}
Но у меня есть ошибка в моей IDE:
TS2604: тип элемента JSX FormatterComponent не имеет никаких конструкций или сигнатур вызовов.
TS2786: FormatterComponent нельзя использовать в качестве компонента JSX.
Его типComponent<{}, {}, any>не является допустимым типом элемента JSX.
В любом случае, мне кажется, что я делаю какой-то плохой код, и где-то существует какой-то шаблон для этого.
Ответы 1
Компоненты React можно определить в основном двумя разными способами:
- Функциональные компоненты
- Компоненты класса
Компонент класса будет выглядеть примерно так:
import React from 'react';
export class FormatterComponent extends React.Component<> {
constructor(props) {
super(props);
this.state = {
example1:"",
example2:"",
};
}
render(){
return(<MustBeOneParentElement></MustBeOneParentElement>)
}
}
Если вы используете TypeScript, вы можете определить типы реквизита (первый аргумент) и состояния (второй аргумент) как интерфейсы внутри <>.
Функциональный компонент будет выглядеть примерно так
import React from "react";
export const FormatterComponent = ({ props, go, here }) => {
return(<MustBeOneParentElement></MustBeOneParentElement>)
}
В компоненте класса вы будете вызывать методы жизненного цикла this.setState и компонентDidMount().
В функциональном компоненте вы будете использовать useState() для использования перехватчиков для установки состояния и useEffect() вместо методов жизненного цикла компонентаDidMount().
Различия в импорте классов и функциональных компонентов
Компонент класса импортируется следующим образом:
import {FormatterComponent} from "./path/to/FormatterComponent"
Функциональный компонент импортируется следующим образом:
import FormatterComponent from "./path/to/FormatterComponent"
Обычно я избегаю экспорта по умолчанию. Вы также можете объявить несколько компонентов в одном файле, если это имеет смысл. Это позволит вам избежать импорта/экспорта.
Кроме того
Когда вы передаете аргументы в компонент, например, в FormatterComponent, вы передаете их с помощью реквизита.
Итак, если вы хотите передать attrName, вы должны сделать:
<FormatterComponent attrname = {item.attributes[attrName]}/>
Обратите внимание: если вы поставите косую черту перед концом закрывающего «>», вам не понадобится полностью сформированный закрывающий тег.
ОП заявляет: «В любом случае, я чувствую, что делаю какой-то плохой код, и где-то существует некий шаблон для этого». OP Не предоставляет никакой информации ни о <Formatter/>, ни о <FormatterComponent/>. Я вижу возможные проблемы с определением компонента, определением типов реквизитов и состояния, проблемы с импортом компонентов, а также проблемы с передачей реквизитов в компонент, поскольку <FormatterComponent> не является <span>, <p> или тег <h1> и т. д. Это плохо сформулированный вопрос, и у ОП было 2 отрицательных голоса, поэтому я просто попытался предложить помощь, а не игнорировать его. присутствует базовая практика возвращения родителя-одиночки
Как это решает вопрос? Похоже на праймер от llm. ОП знает, как создавать компоненты; проблема в картографировании.