Блог

Главная - Вопросы по программированию - Reactjs: динамическое изменение компонента после ajax

Reactjs: динамическое изменение компонента после ajax

#javascript #reactjs

Вопрос:

Это мой код:

 export default class Index extends React.Component {
    constructor(props) {
        super(props)
        
        this.state = {
            myCom: 'Header'
        }
    }

    componentWillMount(){
        fetch('api...').then(response => response.json()).then(jsonData => {
            this.setState({
                myCom: jsonData.value
            })
        }).catch(error => {
            //
        })
    }

    render() {
        return (
            <div>
                <{this.state.myCom} />
            </div>
        )
    }
}

По умолчанию я хочу загрузить Header компонент

После Ajax я хочу изменить его динамически

Я не хочу использовать if/else или swtich

Потому что мои компоненты-это много

Комментарии:

1. Вызовите API в didmount и didUpdate. Не блокируйте свой рендеринг. Также, пожалуйста, укажите свой код, в котором вы будете проходить повторный ввод.

Ответ №1:

Прежде всего , пожалуйста, избегайте использования асинхронных вызовов componentWillMount() , это может привести к бесконечному перезапуску, Подробнее об этой проблеме читайте здесь. теперь, переходя к вашему вопросу, крайне маловероятно, что react поддерживает динамическую маршрутизацию именно в этом формате. этот код, вероятно, не будет компилироваться. лучше всего получить имя компонента с помощью вызова AJAX и визуализировать компонент с помощью функции renderControll. в вашей текущей реализации вы не определяете/не импортируете какие-либо компоненты и их определение, поэтому динамическое внедрение не работает таким образом.

вам придется следовать чему — то вроде этого

 import Component1 from "componentes/c1" 
import Component2 from "componentes/c1" 
import Component3 from "componentes/c1" 
import Component4 from "componentes/c1" 

const componentRenderer (componentName)=>{
  switch(componentName){
    case 'c1' : return <Component1/>
        case 'c2' : return <Component2/>
            case 'c3' : return <Component3/>
                case 'c4' : return <Component4/>
   
  }
}
export default class Index extends React.Component {
   
    constructor(props) {
        super(props)
        
        this.state = {
            myCom: 'Header'
        }
    }

    componentdidMount(){
        fetch('api...').then(response => response.json()).then(jsonData => {
            this.setState({
                myCom: jsonData.value
            })
        }).catch(error => {
            //
        })
    }

    render() {
        return (
            <div>
                {componentRenderer(this.state.myCom)}
            </div>
        )
    }
}
Метки: