Как переключиться между двумя компонентами React в один файл?

Question

с использованием MVC .NET, у меня есть представления A и B. Проблема в том, что я не знаю, как отобразить правильный компонент в правильном представлении, поскольку он использует тот же файл.

Например, в этот файл jsx у меня есть

export class A extends React.Component {}

export class B extends React.Component {}

export default class Main extends React.Component {
  if ... return A else return B
}

Answer 1

Попробуйте этот подход:

 /** A class holding A component **/
    export class A extends React.Component {}

    /** B class holding B componennt **/
    export class B extends React.Component {}

    /** Main Class **/
    export default class Main extends React.Component {
        render(){

           let aComponent = true; //it will depends on which component you want to render
           let componentToRender = <A />;
           if(!aComponent){
             componentToRender = <B />;
           } 
           return(
             <div>{componentToRender}</div>
           )
        }
    }

Использовать Main компонент типа:

<Main />

Answer 2

Вы можете попробовать код ниже:

/** ViewA Component **/
export class ViewA extends React.Component {}

/** ViewB componennt **/
export class ViewB extends React.Component {}

/** View main class **/
export default class ViewMain extends React.Component {
    render(){
       let aComponent = true; //a threshold should be changed.
       return aComponent?<ViewA/>:<ViewB/>;
    }
}

Answer 3

Как это:

export default class Main extends React.Component {
  render() {
    if (true) {
      return <A />
    } else {
      return <B />
    }
  }
}

Давайте разберем этот пример:

Когда вы используете основной компонент, вы будете использовать так:

<Main someOption={true} />

Теперь внутри Главного класса вы можете проверить:

if(this.props.someOption) // replaced to true