Неправильная ошибка корпуса с динамически отображаемым компонентом в React
Итак, я хотел бы сэкономить время позже и хочу создать динамически генерируемую страницу. По этой причине я хочу читать данные компонента из объекта, например:
layout: {
toolbar: {
components: [
{
type: "Testcomp",
theme: "default",
data: "div1"
},
{
type: "Testcomp",
theme: "pro",
data: "div2"
},
]}}
Компонент будет динамически импортирован, включен / активирован, и, кроме того, это код jsx, который должен динамически отображать компоненты:
render() {
const toolbarComponents = userSession.layout.toolbar.components.map(Component => (
<Component.type theme = {Component.theme} data = {Component.data} key = {this.getKey()} />
));
return (
<div>
<div className = "toolbar">
toolbar
{toolbarComponents}
</div>
. . .
</div>
);
}
Однако я получаю следующее предупреждение в Chrome devtool, также компонент не отображается:
Предупреждение: используется неправильный корпус. Используйте PascalCase для компонентов React или строчные буквы для элементов HTML.
Предупреждение: тег не распознается в этом браузере. Если вы хотели визуализировать компонент React, начните его имя с заглавной буквы.
Что не так с моим кодом?
Нет, моя проблема заключалась в том, что я ссылался на строку вместо объекта.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы получаете эти ошибки, потому что здесь вы не ссылаетесь на сам компонент, а вместо этого используете строку в качестве имени. Итак, возможно, вам нужно подумать о другом способе динамического создания компонентов. Как начать с базового компонента и дать ему только некоторые реквизиты и данные.
// Define above main component or elsewhere then import.
const MyComponent = ( props ) => <div>{props.data}</div>
// Main component
render() {
const toolbarComponents = userSession.layout.toolbar.components.map(
component => <MyComponent theme = {component.theme} data = {component.data} />
);
return <div className = "App">{toolbarComponents}</div>;
}
Здесь мы больше не используем типовой ключ. Если вы хотите использовать такие разные компоненты, вы можете создать каждый базовый компонент, а затем использовать его имя с ключом типа, но не со строкой, напрямую ссылаясь на компонент.
Да, моя проблема в первую очередь заключалась в том, что я ссылался только на строку, а не на объект. Что касается предлагаемого альтернативного решения, то это хорошая идея, но в другой раз.
Возможный дубликат stackoverflow.com/questions/30373343/… ??