如何在两个 React 组件之间切换到一个文件中？答案

【问题标题】：How to switch between two React component into a single file?如何在两个 React 组件之间切换到一个文件中？
【发布时间】：2018-08-28 05:30:13
【问题描述】：

使用 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
}

【问题讨论】：

标签： asp.net-mvc reactjs

【解决方案1】：

像这样：

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

让我们详细说明这个例子：

当你使用 Main 组件时，你会这样使用：

<Main someOption={true} />

现在，在 Main 类中，您可以检查：

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

【讨论】：

【解决方案2】：

试试这个方法：

 /** 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 />

【讨论】：

【解决方案3】：

你可以试试下面的代码：

/** 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/>;
    }
}

【讨论】：