#reactjs
Вопрос:
Вот небольшой пример того, что я пытаюсь сделать, я не знаю, возможно ли сделать что-то подобное, или мне следует использовать совершенно другой метод.
import {Design1, Design2} from './page-designs';
let designs = {
"page1":"Design1",
"page2":"Design2",
"page3":"Design1",
"page4":"Design2"
}
class DesignedPage extends React.Component {
let Design = designs[this.props.page]
render(){
return(
<div className="row flex-fill d-flex">
<div className="col-1"></div>
<Design /* This is the line that fails */
data = {this.props.data}
/>
</div>
</div>
)}
}
class Main extends React.Component {
render(){
return(
<DesignedPage
page = {this.props.openPage} /*this could be any of page1-4 depending on button a click*/
data = {this.props.data}
/>
)}
}
В идеале это должно было бы отображать Дизайн1 или Дизайн2 элементов react на основе того, что передается props.page, но вместо этого он возвращает
"Warning: <Design1 /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements."
и "The tag <Design1> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter."
Я подумал о том, чтобы сделать длинное утверждение if, elseif, elseif.. в DesignedPage (фактический код имеет гораздо больше, чем 2 дизайна), которое, я уверен, сработает, но выглядит очень грязно по сравнению с этим.
Комментарии:
1. См. раздел: Выбор типа во время выполнения
Ответ №1:
Вы не можете отобразить имя компонента, получив его имя в виде строки. Вам нужно сопоставить строку с самим компонентом:
let designs = {
"page1":Design1,
"page2":Design2,
}
Комментарии:
1. О боже, это было так просто, я застрял на этом в течение нескольких часов!! Спасибо!
2. Нет проблем, если этот ответ вам помог, я был бы признателен, если бы вы отметили его как ответ 🙂 Счастливое кодирование
3. Вы ответили так быстро, что я пока не могу принять ответ, я приму его, как только мне разрешат
4. Ха-ха, без проблем! Счастливое кодирование
Ответ №2:
Если вы передадите строку, react подумает, что это HTML-тег, поэтому в нем говорится, что тег «Дизайн1» не распознан. Кроме того, вы можете импортировать компоненты и использовать их в качестве значений в объекте designs вместо строк.
let designs = {
"page1":Design1,
"page2":Design2,
"page3":Design1,
"page4":Design2
}
Ответ №3:
сделайте одну функцию, которая возвращает компонент react..
getComponent = ({data, pageName}) => {
if(pageName === "page1") return <Desig1 />;
if(pageName === "page2") return <Design2 />;
}
и вызов функции из рендеринга компонента DesignedPage
const {страница, данные} = это.реквизит;
return(
<div className="row flex-fill d-flex">
<div className="col-1">
{getComponent(page, data)}
</div>
</div>
)