ReactJS条件组件显示

我正在尝试使用切换按钮将两张不同的卡合并到一张卡中：

正如你在这里看到的，这是我想要的结果，加上我已经得到了控制台输出切换器的状态，这是从切换器组件得到的

/* ************************************* */
/* ********       IMPORTS       ******** */
/* ************************************* */
import React, { Component } from 'react';
import { Card, CardBlock, CardTitle, Button, InputGroup, Input } from 'reactstrap';
import ProviderInfos from '../ProviderInfos/ProviderInfos';
import Switcher from '../Switcher/Switcher';
import SearchByType from '../CardCollection/SearchByType';
import SearchExtended from '../CardCollection/SearchExtended';


/* ************************************* */
/* ********      VARIABLES      ******** */
/* ************************************* */

const status = {
    newState: false,
    callBack: () => {},
};

/* ************************************* */
/* ********      COMPONENT      ******** */
/* ************************************* */

class InterfaceCardComponent extends Component {

    // constructor with state and bind of switch state
    constructor(props) {
        super(props);
        //this.handleChange = this.handleChange.bind(this);
        //onChange={newState.handleChange.bind(this)}
        //this.newState = {this.state.bind(this)};


    }
    // switch state
    handleSwitch(newState) {
console.log(newState);
        }

    render() {

        return (
            <Card>
                <div id="cardInterface">
                    <div className="title-switcher-block">
                        <CardTitle>Search by Type</CardTitle>
                        <Switcher callBack={this.handleSwitch} />
                        <CardTitle>Extended search</CardTitle>
                    </div>
                    <div>
                      {/* I cheated here for the picture and put the contents within "SearchByType" */}
                      {this.newState ?
                            <SearchByType />
                            : <SearchExtended />}
                    </div>
                </div>
            </Card>
        );
    }
}

/* ************************************* */
/* ********       EXPORTS       ******** */
/* ************************************* */
export default InterfaceCardComponent;

当我点击按钮时，打印出true或false

我不知道构造函数和变量部分应该是什么，也不知道在render中是用“this.newState”还是“newState”调用newState

我尝试将导入更改为：

import { SearchByType } from '../CardCollection/SearchByType'; 
import { SearchExtended } from '../CardCollection/SearchExtended'; 

但这并没有帮助，而且无论如何也不应该如此，因为这些都是

export defaut

---

我非常迷茫。

若要有条件地渲染组件（基于切换值），请在状态变量中维护一个bool，并且在渲染方法内部使用该bool对组件进行有条件渲染

/* ************************************* */
/* ********       IMPORTS       ******** */
/* ************************************* */
import React, { Component } from 'react';
import { Card, CardBlock, CardTitle, Button, InputGroup, Input } from 'reactstrap';
import ProviderInfos from '../ProviderInfos/ProviderInfos';
import Switcher from '../Switcher/Switcher';
import SearchByType from '../CardCollection/SearchByType';
import SearchExtended from '../CardCollection/SearchExtended';


/* ************************************* */
/* ********      VARIABLES      ******** */
/* ************************************* */

const status = {
    newState: false,
    callBack: () => {},
};

/* ************************************* */
/* ********      COMPONENT      ******** */
/* ************************************* */

class InterfaceCardComponent extends Component {

    // constructor with state and bind of switch state
    constructor(props) {
        super(props);
        //this.handleChange = this.handleChange.bind(this);
        //onChange={newState.handleChange.bind(this)}
        //this.newState = {this.state.bind(this)};


    }
    // switch state
    handleSwitch(newState) {
console.log(newState);
        }

    render() {

        return (
            <Card>
                <div id="cardInterface">
                    <div className="title-switcher-block">
                        <CardTitle>Search by Type</CardTitle>
                        <Switcher callBack={this.handleSwitch} />
                        <CardTitle>Extended search</CardTitle>
                    </div>
                    <div>
                      {/* I cheated here for the picture and put the contents within "SearchByType" */}
                      {this.newState ?
                            <SearchByType />
                            : <SearchExtended />}
                    </div>
                </div>
            </Card>
        );
    }
}

/* ************************************* */
/* ********       EXPORTS       ******** */
/* ************************************* */
export default InterfaceCardComponent;

---

首先定义构造函数内的状态和初始值为false的newState变量：

constructor(props) {
    super(props);
    this.state = {
        newState: false
    }
    this.handleSwitch = this.handleSwitch.bind(this);
}

更新handleSwitch函数中的状态变量：

handleSwitch(newState) {
    this.setState({newState});
}

使用此代码根据开关值渲染不同的组件：

<div>
    {
        this.state.newState ?
            <SearchByType />
        : 
            <SearchExtended />
    }
</div>

{
这个州，新闻州？
: 
}

查看这些参考以了解更多详细信息：

---

您根本没有使用React的

状态

机制。以下是您可以修复它的方法

  handleSwitch(newState) {
          this.setState(prevState => ({
            isExtended: !prevState.isExtended
        }));
  }

您的构造函数将如下所示

 constructor(props) {
        super(props);
        this.state = {};
        this.handleSwitch = this.handleSwitch.bind(this);
    }

你可以和我核对一下

{
    this.state.isExtended ?
        <SearchExtended/> : <SearchByType/>
}

{
这个.state.i扩展了吗？
: 
}

---

最后，在此阅读有关状态和生命周期的更多信息

未捕获错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件。检查

InterfaceCardComponent

的渲染方法。

{
    this.state.isExtended ?
        <SearchExtended/> : <SearchByType/>
}