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> 

これは私の条件です。

この：私はボタンをクリックしたときに

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

は、真または偽を出力します。

"this.newState"または "newState"でレンダリング内のnewStateを呼び出すかどうか、コンストラクタと変数セクションに何が含まれるべきか分かりません。

私はに私の輸入を変えてみました：

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

が、それは助けにはならなかった、それはこれらがexport defaut

をしているとにかくので、私は非常に迷ってしまいましたことをすべきではありません。

Answer 1

コンポーネントを条件付きで（トグル値に基づいて）レンダリングするには、状態変数内のブール値を維持し、内部レンダリングメソッドはそのブールをコンポーネントの条件付きレンダリングに使用します。異なるレンダリングする

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

使用このコード：

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

更新handleSwitch関数内の状態変数：

---

まず偽として初期値を持つコンストラクタと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

あなたは全く反応の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