在react中隐藏和显示元素是非常简单的。

有很多种方法，但我只展示两种。

方式1:

const [isVisible, setVisible] = useState(false)

let onHideShowClick = () =>{
    setVisible(!isVisible)
}

return (<div> 
        <Button onClick={onHideShowClick} >Hide/Show</Button>
         {(isVisible) ? <p>Hello World</p> : ""}
</div>)

方式2:

const [isVisible, setVisible] = useState(false)

let onHideShowClick = () =>{
    setVisible(!isVisible)
}

return (<div> 
        <Button onClick={onHideShowClick} >Hide/Show</Button>
        <p style={{display: (isVisible) ? 'block' : 'none'}}>Hello World</p>
</div>)

它就像if和else一样工作。

在方法一中，它将删除并重新渲染Dom中的元素。 在第二种方式中，你只是将元素显示为false或true。

谢谢你！

在最新的react 0.11版本中，你也可以只返回null，不呈现任何内容。

渲染为空

2020年左右的反应

在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年

关键是使用setState更新单击处理程序中组件的状态。当状态改变被应用时，渲染方法会再次被调用，并使用新的状态:

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

我从React团队的声明开始:

在React中，你可以创建封装行为的不同组件 你所需要的。然后，您只能渲染其中的一些，这取决于 您的申请状态。 条件渲染在React中的工作方式与条件的工作方式相同 JavaScript。使用JavaScript操作符，如if或条件 运算符来创建表示当前状态的元素，并让 React更新UI以匹配它们。

基本上需要显示组件的按钮被点击时,你可以两种方式,使用纯粹的反应或使用CSS,使用纯的反应方式,你可以做类似下面的代码在你的情况下,所以在第一次运行,结果并不像hideResults显示是正确的,但通过单击按钮,状态会改变和hideResults是假和组件再次呈现新的价值条件下,这是很常见的使用改变组件视图的反应……

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

如果你想进一步研究React中的条件渲染，可以看看这里。

以下是我的方法。

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

仅当opened为true时才会呈现SomeElement。它的工作原理在于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”的原因;

While it might be 'cheaper' to hide an element with CSS - in such case 'hidden' element is still 'alive' in react world (which might make it actually way more expensive) it means that if props of the parent element (eg. <TabView>) will change - even if you see only one tab, all 5 tabs will get re-rendered the hidden element might still have some lifecycle methods running - eg. it might fetch some data from the server after every update even tho it's not visible the hidden element might crash the app if it'll receive incorrect data. It might happen as you can 'forget' about invisible nodes when updating the state you might by mistake set wrong 'display' style when making element visible - eg. some div is 'display: flex' by default, but you'll set 'display: block' by mistake with display: invisible ? 'block' : 'none' which might break the layout using someBoolean && <SomeNode /> is very simple to understand and reason about, especially if your logic related to displaying something or not gets complex in many cases, you want to 'reset' element state when it re-appears. eg. you might have a slider that you want to set to initial position every time it's shown. (if that's desired behavior to keep previous element state, even if it's hidden, which IMO is rare - I'd indeed consider using CSS if remembering this state in a different way would be complicated)

我创建了一个小组件来处理这个问题:react-toggle-display

它根据隐藏或显示道具将样式属性设置为display: none !important。

使用示例:

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