在React中显示或隐藏元素

您在状态中设置一个布尔值（例如'show）'，然后执行：

var style = {};if (!this.state.show) {style.display = 'none'}
return <div style={style}>...</div>

React大约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

React 2014

关键是使用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>

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

渲染为空

我创建了一个小组件来处理这个问题：反应切换显示

它基于hide或show道具将style属性设置为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);

这是使用虚拟DOM的好方法：

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

示例这里

使用React钩子：

const Toggle = () => {const [show, toggleShow] = React.useState(true);
return (<div><buttononClick={() => toggleShow(!show)}>toggle: {show ? 'show' : 'hide'}</button>{show && <div>Hi there</div>}</div>)}

示例这里

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

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

相当于：

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

了解原因

还有display: 'none';的替代语法

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

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

在某些情况下，高阶组件可能有用：

创建高阶组件：

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

扩展您自己的组件：

export const MyComp= HidableComponent(MyCompBasic);

然后你可以像这样使用它：

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

这减少了一些样板并强制遵守命名约定，但是请注意MyComp仍然会被实例化-省略的方法在前面提到过：

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

如果您想了解如何TOGGLE组件的显示，请查看此小提琴。

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

这是我的方法。

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为真时才会呈现SomeElement。它的工作原理是因为JavaScript解决逻辑条件的方式：

true && true && 2; // will output 2true && false && 2; // will output falsetrue && '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 egconst 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“显示：无”的原因；

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

根据留档，最佳实践如下：

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

仅当状态有效时才呈现元素。

我从React团队的这个声明开始：

在React中，您可以创建封装行为的不同组件然后，你可以只渲染其中的一些，这取决于您的应用程序的状态。

React中的条件渲染与条件渲染的工作方式相同JavaScript。使用JavaScript运算符，如if或条件运算符创建表示当前状态的元素，并让响应更新UI以匹配它们。

你基本上需要在按钮被点击时显示组件，你可以用两种方式，使用纯React或使用CSS，使用纯React方式，你可以在你的情况下做如下代码，所以在第一次运行中，结果不会显示为hideResults是true，但通过单击按钮，状态会改变，hideResults是false，组件会再次呈现新的值条件，这是在React中更改组件视图的非常常见的用途……

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中进一步研究条件渲染，请查看这里。

已经有几个很好的答案了，但我认为它们没有被解释得很好，并且给出的几个方法包含一些可能会让人迷惑的陷阱。因此，我将回顾一下做到这一点的三种主要方法（加上一个离题选项），并解释其优缺点。我写这篇文章的主要原因是选项1被推荐了很多，如果使用不当，那个选项会有很多潜在的问题。

选项1：父级中的条件渲染。

我不喜欢这种方法，除非你只渲染一次组件并将其留在那里。问题是每次切换可见性时，它都会导致React从头开始创建组件。下面是示例。LogoutButton或LoginButton在父LoginControl中有条件地呈现。如果您运行此命令，您会注意到每次单击按钮都会调用构造函数。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'));

现在React在从头开始创建组件方面已经非常快了。但是，在创建它时它仍然必须调用你的代码。所以如果你的构造函数，组件迪迪山，渲染等代码是昂贵的，那么它会显着减慢组件的显示速度。这也意味着你不能将其用于有状态组件，你希望在隐藏时保留状态（并在显示时恢复状态）。一个优点是隐藏组件在被选中之前根本不会创建。因此隐藏组件不会延迟你的初始页面加载。也有可能你希望在切换时重置有状态组件。在这种情况下，这是你最好的选择。

选项2：子进程中的条件渲染

这两个组件只创建一次。如果组件隐藏，则短路其余的呈现代码。您还可以使用可见道具短路其他方法中的其他逻辑。请注意coDepen页面中的console.log。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'));

现在，如果初始化逻辑很快，并且子节点是无状态的，那么你不会看到性能或功能上的差异。但是，为什么要让React每次切换都创建一个全新的组件呢？然而，如果初始化的成本很高，每次切换组件时，选项1都会运行它，这会在切换时减慢页面速度。选项2将在第一页加载时运行所有组件的初始化。减慢第一次加载。应该再次注意。如果你只是根据条件显示组件一次而不切换它，或者你希望它在toggledm时重置，那么选项1很好，可能是最好的选择。

然而，如果页面加载缓慢是一个问题，这意味着你在生命周期方法中得到了昂贵的代码，这通常不是一个好主意。你可以（而且可能应该）通过将昂贵的代码移出生命周期方法来解决页面加载缓慢的问题。将其移动到ComponentTitMount启动的异步函数中，并让回调使用setState（）将其放入状态变量中。如果状态变量为null并且组件可见，那么让渲染函数返回一个占位符。否则渲染数据。这样页面将快速加载并在加载时填充选项卡。你还可以将逻辑移动到父级并将结果作为道具推送给子级。这样你就可以优先考虑哪些选项卡首先加载。或者缓存结果并仅在第一次显示组件时运行逻辑。

选项3：类隐藏

类隐藏可能是最容易实现的。如前所述，你只需要创建一个带有显示：无的CSS类，并根据prop分配该类。缺点是每个隐藏组件的整个代码都被调用，并且所有隐藏组件都附加到DOM。（选项1根本不创建隐藏组件。选项2在组件隐藏时短路不必要的代码，并将组件完全从DOM中删除。）根据评论者对其他答案所做的一些测试，这似乎在切换可见性方面更快，但我不能说。

选项4：一个组件，但改变道具。或者根本没有组件，缓存超文本标记语言。

这个并不适用于每个应用程序，它也偏离了主题，因为它不是关于隐藏组件，但对于某些用例来说，它可能是比隐藏更好的解决方案。假设你有选项卡。可以编写一个反应组件，然后使用道具来更改选项卡中显示的内容。你也可以将JSX保存为状态变量，并使用道具来决定在渲染函数中返回哪个JSX。如果必须生成JSX，然后将其缓存在父级中，并将正确的JSX作为道具发送。或者在子级中生成并将其缓存在子级状态中，并使用道具来选择活动的。

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

如果您使用bootstrap 4，您可以以这种方式隐藏元素

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

这也可以像这样实现（非常简单的方法）

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

此示例显示了如何通过使用每隔1秒切换一次的切换来在组件之间切换

import React ,{Fragment,Component} from "react";import ReactDOM from "react-dom";
import "./styles.css";
const Component1 = () =>(<div><imgsrc="https://i.pinimg.com/originals/58/df/1d/58df1d8bf372ade04781b8d4b2549ee6.jpg" /></div>)
const Component2 = () => {return (<div><imgsrc="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.statereturn (<Fragment>{toggleFlag ? <Component1 /> : <Component2 />}</Fragment>)}}

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

使用rc-if-其他模块

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

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.show && <MyCustomComponent /> }

使用参考并操作CSS

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

// Parent.jsximport 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如果我说错了请纠正我：）

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

这是一个简单、有效和最佳的解决方案，带有用于显示/隐藏元素的无类React组件。使用React-Hooks开发工具，它在使用反应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;

快乐编码：）

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

使用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;

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

使用Hooks在React中显示/隐藏元素的简单方法

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

现在，让我们为我们的渲染方法添加一些逻辑：

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

和

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

干得好。

我能够使用css属性“隐藏”。不知道可能的缺点。

export default function App() {const [hidden, setHidden] = useState(false);return (<div><button onClick={() => setHidden(!hidden)}>HIDE</button><div hidden={hidden}>hidden component</div></div>);}

// Try this way
class App extends Component{
state = {isActive:false}
showHandler = ()=>{this.setState({isActive: true})}
hideHandler = () =>{this.setState({isActive: false})}
render(){return(<div>{this.state.isActive ? <h1>Hello React jS</h1> : null }<button onClick={this.showHandler}>Show</button><button onClick={this.hideHandler}>Hide</button></div>)}}

只需找出一种新的神奇方法，使用（useReduce er）功能组件

const[state， handleChangeState]=useReduce er（（state）=>！改变状态

状态和效果的应用已经并且必须封装在同一个组件中，因此，没有什么比创建一个自定义组件作为钩子来解决在这种情况下是使特定块或元素可见还是不可见更好的了。

// hooks/useOnScreen.js
import { useState, useEffect } from "react"
const useOnScreen = (ref, rootMargin = "0px") => {
const [isVisible, setIsVisible] = useState(false)
useEffect(() => {const observer = new IntersectionObserver(([entry]) => {setIsVisible(entry.isIntersecting)},{rootMargin});
const currentElement = ref?.current
if (currentElement) {observer.observe(currentElement)}
return () => {observer.unobserve(currentElement)}}, [])
return isVisible}
export default useOnScreen

然后将自定义钩子嵌入到组件中

import React, { useRef } from "react";import useOnScreen from "hooks/useOnScreen";
const MyPage = () => {
const ref = useRef(null)
const isVisible = useOnScreen(ref)
const onClick = () => {console.log("isVisible", isVisible)}  
return (<div ref={ref}><p isVisible={isVisible}>Something is visible</p><ahref="#"onClick={(e) => {e.preventDefault();onClick(onClick)}}>Review</a></div>)}
export default MyPage

由use Ref钩子控制的ref变量允许我们捕获我们想要控制的块的DOM中的位置，然后由use On屏幕钩子控制的isViable变量允许我们通过use Ref钩子在块I内部发出信号。我相信这种useState、useAfect和useRef挂钩的实现允许您通过使用自定义挂钩将它们分开来避免组件呈现。

希望这些知识对你有用。

隐藏和显示反应中的元素非常简单。

有很多方法，但我将向您展示两种方法。

方式一：

const [isVisible, setVisible] = useState(false)
let onHideShowClick = () =>{setVisible(!isVisible)}
return (<div><Button onClick={onHideShowClick} >Hide/Show</Button>{(isVisible) ? <p>Hello World</p> : ""}</div>)

方式二：

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

它就像如果和其他一样工作。

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

谢谢。

你必须在代码中做一些小的改变，以便不断地隐藏和显示

const onClick = () => {setShowResults(!showResults}

问题会解决的

const Search = () => {const [showResults, setShowResults] = React.useState(false)const onClick = () => setShowResults(true)const onClick = () => {setShowResults(!showResults}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>```