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>

这将是我的条件。

这个：

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

单击按钮时，

打印出true或false。

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

我尝试将导入更改为：

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

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

我很失落。

Answer 1

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

首先在构造函数和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

ReactJS条件组件显示

2 个答案: