大约在 2020 年做出react

在onClick回调中，调用状态钩子的setter 函数更新状态并重新渲染：

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

大约 2014 年的react

关键是使用setState. 当应用状态更改时，该render方法将再次使用新状态调用：

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>

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

这是三元运算符的另一种语法：

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

相当于：

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

了解原因

也可以使用替代语法 display: 'none';

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

但是，如果您过度使用display: 'none'，这会导致 DOM 污染并最终减慢您的应用程序。

这是我的方法。

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

在上面的代码中，为了实现这一点，我使用了如下代码：

{opened && <SomeElement />}

SomeElement仅当opened为 true 时才会呈现。它之所以起作用，是因为 JavaScript 解决逻辑条件的方式：

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 = [];
someValue.length && <SomeElement /> // will output 0, which will be rednered by react
// it'll be better to:
someValue.length > 0 && <SomeElement /> // will render nothing as we cast the value to boolean

使用这种方法而不是 CSS 'display: none' 的原因；

• 虽然用 CSS 隐藏元素可能“更便宜” - 在这种情况下，“隐藏”元素在react世界中仍然“活跃”（这可能使它实际上更昂贵）
  • 这意味着如果父元素的props（例如<TabView>）发生变化 - 即使您只看到一个选项卡，所有 5 个选项卡都会重新呈现
  • 隐藏元素可能仍然有一些生命周期方法在运行 - 例如。它可能会在每次更新后从服务器获取一些数据，即使它不可见
  • 如果隐藏元素接收到不正确的数据，它可能会导致应用程序崩溃。可能会发生这种情况，因为您可以在更新状态时“忘记”不可见的节点
  • 在使元素可见时，您可能会错误地设置错误的“显示”样式 - 例如。某些 div 默认为 'display: flex'，但您会错误地设置 'display: block'，display: invisible ? 'block' : 'none'这可能会破坏布局
  • usingsomeBoolean && <SomeNode />非常容易理解和推理，尤其是当您与显示或不显示相关的逻辑变得复杂时
  • 在许多情况下，您希望在元素重新出现时“重置”它。例如。您可能有一个滑块，每次显示时都希望将其设置为初始位置。（如果这是保持先前元素状态的理想行为，即使它是隐藏的，IMO 很少见 - 如果以不同的方式记住这个状态会很复杂，我确实会考虑使用 CSS）

使用最新版本 react 0.11，您也可以只返回 null 以不呈现任何内容。

渲染为空