Блог

Главная - Вопросы по программированию - Можно ли отобразить класс react, если ему присвоено имя в виде строки?

Можно ли отобразить класс react, если ему присвоено имя в виде строки?

#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>
  )
Метки: ,