ReactJS: визуализировать динамический компонент и передать реквизиты
В компоненте DataGridCell мне нужно предоставить возможность указать, какой компонент должен отображать содержимое ячейки. Также в этот компонент необходимо передать props. Я попробовал сделать это следующим образом (упрощенная версия):
import * as React from 'react';
interface IDataGridCellProps {
data?: any,
component?: React.Component,
}
export default class DataGridCell extends React.Component<IDataGridCellProps> {
public render() {
const Cmp: React.Component<any> = this.props.component as React.Component;
return (
<div>
<Cmp {...this.props.data} />
</div>
)
}
}
У меня следующая ошибка: TS2604: тип элемента JSX 'Cmp' не имеет никаких конструкций или сигнатур вызовов
Что не так и как правильно визуализировать динамический компонент?
UPD
Затем я использую компонент DataGridCell следующим образом:
<DataGridCell key = {indexCell}
data = {profile}
component = {cell.component}
/>
Это в цикле. cell.component находится в конфиге и выглядит так: component: Text. Text - наша составляющая.
UPD 2
Так что, похоже, проблема не в реализации, а в ts-lint и typescript. Я привел компонент к типу any, и теперь он работает.
Измененная линейка: const Cmp: any = this.props.component;
Приветствуется любое более ценное объяснение.
Если this.props.component уже является компонентом, вы просто выполняете <div>{this.props.component}</div>. Но если вы хотите передать ему реквизиты, вам нужно передать класс, а не компонент, .. IOW, со стороны вызывающей стороны вы бы сделали -> <DataGridCell component = {MyComponent}/>, а не <DataGridCell component = {<MyComponent/>}.
@MattWay, пожалуйста, прочтите обновленный вопрос.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Делать это нужно так:
interface IDataGridCellProps
{
data?: any;
component?: React.ComponentType<any>;
}
export default class DataGridCell extends React.Component<IDataGridCellProps> {
public render()
{
const Cmp = this.props.component;
if (Cmp)
{
return (
<div>
<Cmp {...this.props.data} />
</div>
);
}
return null;
}
}
TypeScript теперь правильно обрабатывает дженерики в jsx, поэтому он может быть:
interface IDataGridCellProps<T>
{
data?: T;
component?: React.ComponentType<T>;
}
export default class DataGridCell<T> extends React.Component<IDataGridCellProps<T>> {
public render()
{
const Cmp = this.props.component;
if (this.props.data === undefined || Cmp === undefined)
{
return null;
}
return (
<div>
<Cmp {...this.props.data} />
</div>
);
}
}
Спасибо за ваш ответ. Можете вы еще кое-что прояснить здесь? Общий тип никогда не известен, и мне нужно было бы определить тип public static defaultProps: IDataGridCellProps<T> . Как решить эту проблему?
Я не знаю, о каких свойствах по умолчанию вы говорите. Универсальный тип T определяется компилятором, когда используется DataGridCell, и вам не нужно явно его объявлять.
Теперь я понял, что вы имели в виду. Работает отлично. Спасибо
Как вы используете
DataGridCell? Что вы называете опоройcomponent?