Tampilkan atau sembunyikan elemen di Bereaksi

Saya bermain-main dengan React.js untuk pertama kalinya dan tidak dapat menemukan cara untuk menampilkan atau menyembunyikan sesuatu pada halaman melalui event klik. Saya tidak memuat pustaka lain ke halaman, jadi saya mencari cara asli menggunakan pustaka Bereaksi. Inilah yang saya miliki sejauh ini. Saya ingin menampilkan hasil div ketika acara klik menyala.

var Search= React.createClass({
    handleClick: function (event) {
        console.log(this.prop);
    },
    render: function () {
        return (
            <div className="date-range">
                <input type="submit" value="Search" onClick={this.handleClick} />
            </div>
        );
    }
});

var Results = React.createClass({
    render: function () {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search /> , document.body);

Bereaksi sekitar tahun 2020

Di dalam onClickcallback, panggil fungsi setter hook negara untuk memperbarui status dan render ulang:

const Search = () => {
  const [showResults, setShowResults] = React.useState(false)
  const onClick = () => setShowResults(true)
  return (
    <div>
      <input type="submit" value="Search" onClick={onClick} />
      { showResults ? <Results /> : null }
    </div>
  )
}

const Results = () => (
  <div id="results" className="search-results">
    Some Results
  </div>
)

ReactDOM.render(<Search />, document.querySelector("#container"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JSFiddle

Bereaksi sekitar 2014

Kuncinya adalah memperbarui status komponen dalam penangan klik menggunakan setState. Ketika perubahan status diterapkan, rendermetode dipanggil lagi dengan status baru:

var Search = React.createClass({
    getInitialState: function() {
        return { showResults: false };
    },
    onClick: function() {
        this.setState({ showResults: true });
    },
    render: function() {
        return (
            <div>
                <input type="submit" value="Search" onClick={this.onClick} />
                { this.state.showResults ? <Results /> : null }
            </div>
        );
    }
});

var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

ReactDOM.render( <Search /> , document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JSFiddle

<style type="text/css">
    .hidden { display:none; }
</style>

render: function() {
    return (
      <div className={this.props.shouldHide ? 'hidden' : ''}>
        This will be hidden if you set <tt>props.shouldHide</tt> 
        to something truthy.
      </div>
    );
}

// or in more modern JS and stateless react
const Example = props => <div className={props.shouldHide}/>Hello</div>

Berikut adalah sintaks alternatif untuk operator ternary:

{ this.state.showMyComponent ? <MyComponent /> : null }

setara dengan:

{ this.state.showMyComponent && <MyComponent /> }

Mengapa ramping

Juga sintaks alternatif dengan display: 'none';

<MyComponent style={this.state.showMyComponent ? {} : { display: 'none' }} />

Namun, jika Anda terlalu sering menggunakan display: 'none', ini menyebabkan polusi DOM dan akhirnya memperlambat aplikasi Anda.

Ini pendekatan saya.

import React, { useState } from 'react';

function ToggleBox({ title, children }) {
  const [isOpened, setIsOpened] = useState(false);

  function toggle() {
    setIsOpened(wasOpened => !wasOpened);
  }

  return (
    <div className="box">
      <div className="boxTitle" onClick={toggle}>
        {title}
      </div>
      {isOpened && (
        <div className="boxContent">
          {children}
        </div>
      )}
    </div>
  );
}

Dalam kode di atas, untuk mencapai ini, saya menggunakan kode seperti:

{opened && <SomeElement />}

Itu akan membuat SomeElementhanya jika openeditu benar. Ini berfungsi karena cara JavaScript menyelesaikan kondisi logis:

true && true && 2; // will output 2
true && false && 2; // will output false
true && 'some string'; // will output 'some string'
opened && <SomeElement />; // will output SomeElement if `opened` is true, will output false otherwise (and false will be ignored by react during rendering)
// be careful with 'falsy' values eg
const someValue = 0;
someValue && <SomeElement /> // will output 0, which will be rednered by react
// it'll be better to:
!!someValue && <SomeElement /> // will render nothing as we cast the value to boolean

Alasan untuk menggunakan pendekatan ini alih-alih CSS 'display: none';

• Walaupun mungkin 'lebih murah' untuk menyembunyikan elemen dengan CSS - dalam kasus seperti itu elemen 'tersembunyi' masih 'hidup' di dunia reaksi (yang mungkin membuatnya sebenarnya jauh lebih mahal)
  • itu berarti bahwa jika alat peraga dari elemen induk (mis. <TabView>) akan berubah - bahkan jika Anda hanya melihat satu tab, semua 5 tab akan dirender ulang
  • elemen tersembunyi mungkin masih memiliki beberapa metode siklus hidup berjalan - mis. mungkin mengambil beberapa data dari server setelah setiap pembaruan meskipun itu tidak terlihat
  • elemen tersembunyi mungkin membuat aplikasi mogok jika akan menerima data yang salah. Ini mungkin terjadi karena Anda dapat 'lupa' tentang node yang tidak terlihat saat memperbarui negara
  • Anda mungkin secara tidak sengaja salah mengatur gaya 'tampilan' saat membuat elemen terlihat - mis. beberapa div adalah 'display: flex' secara default, tetapi Anda akan menetapkan 'display: block' secara tidak sengaja display: invisible ? 'block' : 'none'yang dapat merusak tata letak
  • Penggunaannya someBoolean && <SomeNode />sangat sederhana untuk dipahami dan dipikirkan, terutama jika logika Anda terkait dengan menampilkan sesuatu atau tidak menjadi kompleks
  • dalam banyak kasus, Anda ingin 'mengatur ulang' elemen saat muncul kembali. misalnya. Anda mungkin memiliki slider yang ingin Anda atur ke posisi awal setiap kali itu ditampilkan. (jika itu perilaku yang diinginkan untuk mempertahankan status elemen sebelumnya, bahkan jika itu tersembunyi, yang IMO jarang - saya memang mempertimbangkan menggunakan CSS jika mengingat keadaan ini dengan cara yang berbeda akan rumit)

dengan versi terbaru bereaksi 0.11 Anda juga dapat mengembalikan null agar konten tidak ditampilkan.

Render ke nol

Saya membuat komponen kecil yang menangani ini untuk Anda: react-toggle-display

Ini menetapkan atribut gaya display: none !importantberdasarkan pada hideatau showalat peraga.

Contoh penggunaan:

var ToggleDisplay = require('react-toggle-display');

var Search = React.createClass({
    getInitialState: function() {
        return { showResults: false };
    },
    onClick: function() {
        this.setState({ showResults: true });
    },
    render: function() {
        return (
            <div>
                <input type="submit" value="Search" onClick={this.onClick} />
                <ToggleDisplay show={this.state.showResults}>
                    <Results />
                </ToggleDisplay>
            </div>
        );
    }
});

var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search />, document.body);

Sudah ada beberapa jawaban yang bagus, tetapi saya tidak berpikir mereka sudah dijelaskan dengan baik dan beberapa metode yang diberikan mengandung beberapa gotcha yang mungkin membuat orang tersandung. Jadi saya akan membahas tiga cara utama (plus satu opsi di luar topik) untuk melakukan ini dan menjelaskan pro dan kontra. Saya kebanyakan menulis ini karena Opsi 1 sangat direkomendasikan dan ada banyak potensi masalah dengan opsi itu jika tidak digunakan dengan benar.

Opsi 1: rendering bersyarat pada induknya.

Saya tidak suka metode ini kecuali Anda hanya akan membuat komponen satu kali dan meninggalkannya di sana. Masalahnya adalah itu akan menyebabkan reaksi untuk membuat komponen dari awal setiap kali Anda mengaktifkan visibilitas. Inilah contohnya. LogoutButton atau LoginButton sedang dilakukan secara kondisional di induk LoginControl. Jika Anda menjalankan ini, Anda akan melihat konstruktor dipanggil pada setiap klik tombol. https://codepen.io/Kelnor/pen/LzPdpN?editors=1111

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;

    let button = null;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

class LogoutButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created logout button');
  }
  render(){
    return (
      <button onClick={this.props.onClick}>
        Logout
      </button>
    );
  }
}

class LoginButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created login button');
  }
  render(){
    return (
      <button onClick={this.props.onClick}>
        Login
      </button>
    );
  }
}

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

Sekarang Bereaksi cukup cepat dalam membuat komponen dari awal. Namun, masih harus memanggil kode Anda saat membuatnya. Jadi jika konstruktor, componentDidMount, render, dll kode Anda mahal, maka itu akan secara signifikan memperlambat menunjukkan komponen. Ini juga berarti Anda tidak dapat menggunakan ini dengan komponen stateful di mana Anda ingin status dipertahankan ketika disembunyikan (dan dipulihkan saat ditampilkan.) Satu keuntungan adalah bahwa komponen tersembunyi tidak dibuat sama sekali sampai dipilih. Jadi komponen tersembunyi tidak akan menunda pemuatan halaman awal Anda. Mungkin juga ada kasus di mana Anda INGIN komponen stateful untuk mengatur ulang ketika diaktifkan. Dalam hal ini ini adalah pilihan terbaik Anda.

Opsi 2: rendering bersyarat pada anak

Ini menciptakan kedua komponen sekaligus. Kemudian hubung singkat sisa kode render jika komponen disembunyikan. Anda juga dapat membuat hubungan pendek logika lain dalam metode lain menggunakan prop yang terlihat. Perhatikan console.log di halaman codepen. https://codepen.io/Kelnor/pen/YrKaWZ?editors=0011

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        <LoginButton isLoggedIn={isLoggedIn} onClick={this.handleLoginClick}/>
        <LogoutButton isLoggedIn={isLoggedIn} onClick={this.handleLogoutClick}/>
      </div>
    );
  }
}

class LogoutButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created logout button');
  }
  render(){
    if(!this.props.isLoggedIn){
      return null;
    }
    return (
      <button onClick={this.props.onClick}>
        Logout
      </button>
    );
  }
}

class LoginButton extends React.Component{
  constructor(props, context){
    super(props, context)
    console.log('created login button');
  }
  render(){
    if(this.props.isLoggedIn){
      return null;
    }
    return (
      <button onClick={this.props.onClick}>
        Login
      </button>
    );
  }
}

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

Sekarang, jika logika inisialisasi cepat dan anak-anak tanpa kewarganegaraan, maka Anda tidak akan melihat perbedaan dalam kinerja atau fungsionalitas. Namun, mengapa membuat React membuat komponen baru setiap toggle? Namun, jika inisialisasi mahal, Opsi 1 akan menjalankannya setiap kali Anda mengaktifkan komponen yang akan memperlambat halaman saat berpindah. Opsi 2 akan menjalankan semua init komponen pada pemuatan halaman pertama. Memperlambat beban pertama itu. Harus diperhatikan lagi. Jika Anda hanya menampilkan komponen satu kali berdasarkan kondisi dan tidak mengaktifkannya, atau Anda ingin mengatur ulang ketika beralih, maka Opsi 1 baik-baik saja dan mungkin opsi terbaik.

Namun, jika memuat halaman lambat merupakan masalah, itu berarti Anda mendapat kode mahal dalam metode siklus hidup dan itu umumnya bukan ide yang baik. Anda dapat, dan mungkin harus, menyelesaikan beban halaman yang lambat dengan memindahkan kode mahal dari metode siklus hidup. Pindahkan ke fungsi async yang dimulai oleh ComponentDidMount dan minta panggil balik ke dalam variabel keadaan dengan setState (). Jika variabel status adalah nol dan komponen terlihat maka minta fungsi render mengembalikan placeholder. Kalau tidak, render data. Dengan cara itu halaman akan dimuat dengan cepat dan mengisi tab saat memuat. Anda juga dapat memindahkan logika ke orang tua dan mendorong hasilnya ke anak-anak sebagai alat peraga. Dengan begitu Anda dapat memprioritaskan tab mana yang dimuat lebih dulu. Atau cache hasil dan hanya menjalankan logika saat komponen pertama kali ditampilkan.

Opsi 3: Menyembunyikan Kelas

Bersembunyi kelas mungkin yang paling mudah untuk diterapkan. Seperti yang disebutkan, Anda hanya membuat kelas CSS dengan tampilan: tidak ada dan menetapkan kelas berdasarkan prop. Kelemahannya adalah seluruh kode dari setiap komponen tersembunyi dipanggil dan semua komponen tersembunyi dilampirkan ke DOM. (Opsi 1 sama sekali tidak membuat komponen tersembunyi. Dan Opsi 2 kode pendek sirkuit yang tidak perlu ketika komponen disembunyikan dan menghapus komponen dari DOM sepenuhnya.) Tampaknya ini lebih cepat di toggling visibilitas menurut beberapa tes yang dilakukan oleh komentator di jawaban lain tetapi saya tidak bisa berbicara tentang itu.

Opsi 4: Satu komponen tetapi ubah Alat Peraga. Atau mungkin tidak ada komponen sama sekali dan cache HTML.

Yang ini tidak akan berfungsi untuk setiap aplikasi dan ini di luar topik karena ini bukan tentang menyembunyikan komponen, tetapi ini mungkin solusi yang lebih baik untuk beberapa kasus penggunaan daripada bersembunyi. Katakanlah Anda memiliki tab. Mungkin saja untuk menulis satu Komponen Bereaksi dan gunakan saja alat peraga untuk mengubah apa yang ditampilkan di tab. Anda juga bisa menyimpan JSX untuk menyatakan variabel dan menggunakan prop untuk memutuskan JSX mana yang akan kembali dalam fungsi render. Jika JSX harus dihasilkan kemudian lakukan dan cache di orangtua dan mengirim yang benar sebagai alat. Atau hasilkan di dalam child dan temboloklah dalam status child dan gunakan alat peraga untuk memilih yang aktif.

Ini adalah cara yang baik untuk menggunakan DOM virtual :

class Toggle extends React.Component {
  state = {
    show: true,
  }

  toggle = () => this.setState((currentState) => ({show: !currentState.show}));

  render() {
    return (
      <div>
        <button onClick={this.toggle}>
          toggle: {this.state.show ? 'show' : 'hide'}
        </button>    
        {this.state.show && <div>Hi there</div>}
      </div>
     );
  }
}

Contoh di sini

Menggunakan React hooks:

const Toggle = () => {
  const [show, toggleShow] = React.useState(true);

  return (
    <div>
      <button
        onClick={() => toggleShow(!show)}
      >
        toggle: {show ? 'show' : 'hide'}
      </button>    
      {show && <div>Hi there</div>}
    </div>
  )
}

Contoh di sini

Anda menetapkan nilai boolean di negara (mis. 'Tampilkan)', dan kemudian lakukan:

var style = {};
if (!this.state.show) {
  style.display = 'none'
}

return <div style={style}>...</div>

Praktik terbaik di bawah ini sesuai dengan dokumentasi:

{this.state.showFooter && <Footer />}

Berikan elemen hanya ketika status valid.

class Toggle extends React.Component {
  state = {
    show: true,
  }

  render() {
    const {show} = this.state;
    return (
      <div>
        <button onClick={()=> this.setState({show: !show })}>
          toggle: {show ? 'show' : 'hide'}
        </button>    
        {show && <div>Hi there</div>}
      </div>
     );
  }
}

   class FormPage extends React.Component{
      constructor(props){
           super(props);
           this.state = {
             hidediv: false
           }
      }

     handleClick = (){
       this.setState({
          hidediv: true
        });
      }

      render(){
        return(
        <div>
          <div className="date-range" hidden = {this.state.hidediv}>
               <input type="submit" value="Search" onClick={this.handleClick} />
          </div>
          <div id="results" className="search-results" hidden = {!this.state.hidediv}>
                        Some Results
           </div>
        </div>
        );
      }
  }

Saya mulai dengan pernyataan ini dari tim Bereaksi:

Di Bereaksi, Anda dapat membuat komponen berbeda yang merangkum perilaku yang Anda butuhkan. Kemudian, Anda hanya dapat membuat beberapa di antaranya, tergantung pada kondisi aplikasi Anda.

Rendering bersyarat dalam Bereaksi bekerja dengan cara yang sama seperti kondisi bekerja di JavaScript. Gunakan operator JavaScript seperti jika atau operator kondisional untuk membuat elemen yang mewakili kondisi saat ini, dan biarkan React memperbarui UI yang cocok dengan mereka.

Pada dasarnya Anda perlu menunjukkan komponen ketika tombol diklik, Anda dapat melakukannya dengan dua cara, menggunakan murni Bereaksi atau menggunakan CSS, menggunakan cara Bereaksi murni, Anda dapat melakukan sesuatu seperti kode di bawah ini dalam kasus Anda, jadi pada tahap pertama, hasilnya tidak menunjukkan sebagai hideResultsadalah true, tetapi dengan mengklik tombol, negara akan perubahan dan hideResultsadalah falsedan mendapatkan komponen diberikan lagi dengan kondisi nilai baru, ini adalah penggunaan yang sangat umum mengubah tampilan komponen di Bereaksi ...

var Search = React.createClass({
  getInitialState: function() {
    return { hideResults: true };
  },

  handleClick: function() {
    this.setState({ hideResults: false });
  },

  render: function() {
    return (
      <div>
        <input type="submit" value="Search" onClick={this.handleClick} />
        { !this.state.hideResults && <Results /> }
      </div> );
  }

});

var Results = React.createClass({
  render: function() {
    return (
    <div id="results" className="search-results">
      Some Results
    </div>);
   }
});

ReactDOM.render(<Search />, document.body);

Jika Anda ingin melakukan studi lebih lanjut dalam rendering bersyarat dalam Bereaksi, lihat di sini .

Contoh sembunyikan / tunjukkan sederhana dengan React Hooks: (srry about no fiddle)

const Example = () => {

  const [show, setShow] = useState(false);

  return (
    <div>
      <p>Show state: {show}</p>
      {show ? (
        <p>You can see me!</p>
      ) : null}
      <button onClick={() => setShow(!show)}>
    </div>
  );

};

export default Example;

Jika Anda ingin melihat cara TOGGLE tampilan komponen checkout biola ini.

http://jsfiddle.net/mnoster/kb3gN/16387/

var Search = React.createClass({
    getInitialState: function() {
        return { 
            shouldHide:false
        };
    },
    onClick: function() {
        console.log("onclick");
        if(!this.state.shouldHide){
            this.setState({
                shouldHide: true 
            })
        }else{
                    this.setState({
                shouldHide: false 
            })
        }
    },
render: function() {
    return (
      <div>
        <button onClick={this.onClick}>click me</button>
        <p className={this.state.shouldHide ? 'hidden' : ''} >yoyoyoyoyo</p>
      </div>
    );
}
});

ReactDOM.render( <Search /> , document.getElementById('container'));

Metode sederhana untuk menampilkan / menyembunyikan elemen dalam Bereaksi menggunakan Hooks

const [showText, setShowText] = useState(false);

Sekarang, mari tambahkan beberapa logika ke metode render kami:

{showText && <div>This text will show!</div>}

Dan

onClick={() => setShowText(!showText)}

Kerja bagus.

Dalam beberapa kasus, komponen pesanan yang lebih tinggi mungkin berguna:

Buat komponen pesanan lebih tinggi:

export var HidableComponent = (ComposedComponent) => class extends React.Component {
    render() {
        if ((this.props.shouldHide!=null && this.props.shouldHide()) || this.props.hidden)
            return null;
        return <ComposedComponent {...this.props}  />;
    }
};

Perpanjang komponen Anda sendiri:

export const MyComp= HidableComponent(MyCompBasic);

Maka Anda dapat menggunakannya seperti ini:

<MyComp hidden={true} ... />
<MyComp shouldHide={this.props.useSomeFunctionHere} ... />

Ini mengurangi pelat lantai sedikit dan memaksakan tetap pada konvensi penamaan, namun perlu diketahui bahwa MyComp masih akan dipakai - cara untuk menghilangkan disebutkan sebelumnya:

{ !hidden && <MyComp ... /> }

Gunakan modul rc-if-else

npm install --save rc-if-else

import React from 'react';
import { If } from 'rc-if-else';

class App extends React.Component {
    render() {
        return (
            <If condition={this.props.showResult}>
                Some Results
            </If>
        );
    }
}

Gunakan ref dan memanipulasi CSS

Salah satu caranya adalah menggunakan React's refdan memanipulasi kelas CSS menggunakan API browser. Manfaatnya adalah untuk menghindari rerendering dalam Bereaksi jika satu-satunya tujuan adalah untuk menyembunyikan / menampilkan beberapa elemen DOM pada klik tombol.

// Parent.jsx
import React, { Component } from 'react'

export default class Parent extends Component {
    constructor () {    
        this.childContainer = React.createRef()
    }

    toggleChild = () => {
        this.childContainer.current.classList.toggle('hidden')
    }

    render () {
        return (
            ...

            <button onClick={this.toggleChild}>Toggle Child</button>
            <div ref={this.childContainer}>
                <SomeChildComponent/>
            </div>

            ...
        );
    }
}


// styles.css
.hidden {
    display: none;
}

PS Perbaiki saya jika saya salah. :)

Jika Anda menggunakan bootstrap 4, Anda bisa menyembunyikan elemen dengan cara itu

className={this.state.hideElement ? "invisible" : "visible"}

Ini juga bisa dicapai seperti ini (cara yang sangat mudah)

 class app extends Component {
   state = {
     show: false
   };
 toggle= () => {
   var res = this.state.show;
   this.setState({ show: !res });
 };
render() {
  return(
   <button onClick={ this.toggle }> Toggle </button>
  {
    this.state.show ? (<div> HELLO </div>) : null
  }
   );
     }

contoh ini menunjukkan bagaimana Anda dapat beralih antar komponen dengan menggunakan toggle yang beralih setelah setiap 1sec

import React ,{Fragment,Component} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const Component1 = () =>(
  <div>
    <img 
src="https://i.pinimg.com/originals/58/df/1d/58df1d8bf372ade04781b8d4b2549ee6.jpg" />
   </div>
)

const Component2 = () => {
  return (
    <div>
       <img 
src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/2/2e/12ccse.jpg/250px- 
12ccse.jpg" />
  </div>
   )

 }

 class App extends Component {
   constructor(props) {
     super(props);
    this.state = { 
      toggleFlag:false
     }
   }
   timer=()=> {
    this.setState({toggleFlag:!this.state.toggleFlag})
  }
  componentDidMount() {
    setInterval(this.timer, 1000);
   }
  render(){
     let { toggleFlag} = this.state
    return (
      <Fragment>
        {toggleFlag ? <Component1 /> : <Component2 />}
       </Fragment>
    )
  }
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Gunakan sintaks ramping dan pendek ini:

{ this.state.show && <MyCustomComponent /> }

Di sinilah solusi sederhana, efektif dan terbaik dengan Komponen Bereaksi Tanpa Kelas untuk menampilkan / menyembunyikan elemen. Penggunaan React-Hooks yang tersedia di proyek buat-reaksi-aplikasi terbaru yang menggunakan React 16

import React, {useState} from 'react';
function RenderPara(){
const [showDetail,setShowDetail] = useState(false);

const handleToggle = () => setShowDetail(!showDetail);

return (
<React.Fragment>
    <h3>
        Hiding some stuffs 
    </h3>
    <button onClick={handleToggle}>Toggle View</button>
   {showDetail && <p>
        There are lot of other stuffs too
    </p>}
</React.Fragment>)

}  
export default RenderPara;

Selamat Coding :)

//use ternary condition

{ this.state.yourState ? <MyComponent /> : null } 

{ this.state.yourState && <MyComponent /> }

{ this.state.yourState == 'string' ? <MyComponent /> : ''}

{ this.state.yourState == 'string' && <MyComponent /> }

//Normal condition

if(this.state.yourState){
 return <MyComponent />
}else{
  return null;
}

Anda dapat menggunakan file css

    var Results = React.createClass({
    render: function() {
        return (
            <div id="results" className={`search-results ${this.state.showResults ? 'show' : ''}`}>
                Some Results
            </div>
        );
    }
})

dan di file css

    .search-results {
     ...
     display: none
     &.show {
      display: block
   }
}

var Search= React.createClass({
 getInitialState: () => { showResults: false },
 onClick: () => this.setState({ showResults: true }),
 render: function () {
   const { showResults } = this.state;
   return (
     <div className="date-range">
       <input type="submit" value="Search" onClick={this.handleClick} />
       {showResults && <Results />}
     </div>
   );
 }
});

var Results = React.createClass({
    render: function () {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search /> , document.body);

class App extends React.Component {
  state = {
    show: true
  };

  showhide = () => {
    this.setState({ show: !this.state.show });
  };

  render() {
    return (
      <div className="App">
        {this.state.show && 
          <img src={logo} className="App-logo" alt="logo" />
        }
        <a onClick={this.showhide}>Show Hide</a>
      </div>
    );
  }
}