ReactJS条件组件显示

Question

我正在尝试使用切换器按钮将两张不同的卡合二为一:

正如您在这里看到的，这是我想要的结果，而且我已经让控制台输出来自切换器组件的切换器状态。

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

希望这能让我明白我想做的事情。正如您在这里看到的:

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

这将是我的 if 条件。

这个:

handleSwitch(newState) {
    console.log(newState);
}

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

我不知道构造函数和变量部分中应该包含什么，以及是否在渲染中使用“this.newState”或“newState”调用 newState。

我尝试将导入更改为:

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

但这没有帮助，而且无论如何也不应该是这样，因为这些是导出默认

我很失落。

Answer 1

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

<小时/>

首先定义构造函数中的状态和初始值为 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>

查看这些引用资料以了解更多详细信息:

Why is JavaScript bind() necessary?

Adding Local State to a Class

How to define state

How to update state value