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);
}

当我点击按钮时打印出真假。

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

我尝试将导入更改为：

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

但这并没有帮助，反正也不应该是这样，因为这些是export defaut

我很迷茫。

Answer 1

要有条件地渲染组件（基于切换值），请在状态变量中维护一个布尔值，并在渲染方法内部使用该布尔值来有条件地渲染组件。

---

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

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

Answer 2

你根本没有使用 React 的state 机制。以下是您可以解决的方法

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

最后阅读更多关于状态和生命周期的信息https://facebook.github.io/react/docs/state-and-lifecycle.html