只要找到一种新的、神奇的方法来使用(useReducer)功能组件

const [state, handleChangeState] = useReducer((state) => !state, false); 改变状态

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

根据文档，最佳实践如下:

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

只有在状态有效时才呈现元素。

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

const Example = props => 
  <div className={props.shouldHide? 'hidden' : undefined}>Hello</div>

使用ref和操作CSS

一种方法是使用React的ref和使用浏览器的API操作CSS类。它的好处是避免在React中重新渲染，如果唯一的目的是在单击按钮时隐藏/显示一些DOM元素。

// 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:如果我说错了请指正。：）

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


<button onClick={()=>this.setState({yourState: !this.props.yourState}>Toggle View</button>