Fatal编程技术网
  • javascript/
  • Javascript 在React中显示或隐藏元素

Javascript 在React中显示或隐藏元素

javascript reactjs

Javascript 在React中显示或隐藏元素,javascript,reactjs,Javascript,Reactjs,我第一次在React.js上乱搞，找不到通过单击事件在页面上显示或隐藏内容的方法。我没有向页面加载任何其他库，因此我正在寻找使用React库的一些本地方法。这就是我目前所拥有的。我想在单击事件触发时显示results div var Search=React.createClass({ handleClick:函数（事件）{ console.log（this.prop）； }, 渲染：函数（）{ 返回( ); } }); var Results=React.createClass({ 渲染：函数

我第一次在React.js上乱搞，找不到通过单击事件在页面上显示或隐藏内容的方法。我没有向页面加载任何其他库，因此我正在寻找使用React库的一些本地方法。这就是我目前所拥有的。我想在单击事件触发时显示results div

var Search=React.createClass({
handleClick:函数（事件）{
console.log（this.prop）；
},
渲染：函数（）{
返回(
);
}
});
var Results=React.createClass({
渲染：函数（）{
返回(
一些结果
);
}
});
React.renderComponent（，document.body）；
在状态中设置一个布尔值（例如“show”），然后执行以下操作：

var style={}；
如果（！this.state.show）{
style.display='none'
}
返回。。。
React大约在2020年 在
onClick
回调中，调用setter函数更新状态并重新渲染：

const Search=（）=>{
常量[showResults，setShowResults]=React.useState（false）
const onClick=（）=>setShowResults（true）
返回(
{showResults？：null}
)
}
常量结果=（）=>(
一些结果
)
ReactDOM.render（，document.querySelector（“容器”））



.hidden{显示：无；}

render:function（）{
返回(
如果设置props.shoulhdide，则此选项将被隐藏
去做一些真实的事情。
);
}
//或者在更现代的JS和无状态应用程序中
const Example=props=>Hello
对于最新版本的react 0.11，您也可以只返回null，不呈现任何内容

我为您创建了一个小组件来处理这个问题：

它将样式属性设置为
display:none！重要信息
基于
隐藏
或
显示
道具

用法示例：

var-ToggleDisplay=require（'react-toggle-display'）；
var Search=React.createClass({
getInitialState:函数（）{
返回{showResults:false}；
},
onClick:function（）{
this.setState（{showResults:true}）；
},
render:function（）{
返回(
);
}
});
var Results=React.createClass({
render:function（）{
返回(
一些结果
);
}
});
React.renderComponent（，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.Component{
状态={
秀：没错，
}
toggle=（）=>this.setState（（currentState）=>（{show:！currentState.show}））；
render（）{
返回(
切换：{this.state.show？'show'：'hide'}
{this.state.show&&Hi there}
);
}
}
范例

使用React挂钩：

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

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

const Toggle=（）=>{
const[show，toggleShow]=React.useState（true）；
返回(
切换显示（！显示）}
>
切换：{显示？'show'：'hide'}
{show&&Hi there}
)
}
示例

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

{ this.state.showMyComponent ? <MyComponent /> : null }
但是，如果您过度使用了
显示：“无”
，这将导致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&&}

如果您想了解如何在该小提琴上切换组件的显示

var Search=React.createClass({
getInitialState:函数（）{
返回{
应该隐藏：错误
};
},
onClick:function（）{
console.log（“onclick”）；
如果（！this.state.shoulhdide）{
这是我的国家({
真的吗
})
}否则{
这是我的国家({
应该隐藏：错误
})
}
},
render:function（）{
返回(
点击我

Yoyoyo

);
}
});
ReactDOM.render（，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>
  );
}
使用此方法而不是CSS“显示：无”的原因

  • 虽然用CSS隐藏一个元素可能会“便宜”，但在这种情况下，“隐藏”元素在react世界中仍然是“活的”（这可能会使它实际上更加昂贵）
    • 这意味着，如果父元素的道具（例如，
      ）将改变，即使只看到一个选项卡，所有5个选项卡都将重新呈现
    • 隐藏元素可能仍在运行一些生命周期方法-例如，它可能在每次更新后从服务器获取一些数据，即使这些数据不可见
    • 如果隐藏元素接收到不正确的数据，它可能会使应用程序崩溃。这可能是因为在更新状态时您可以“忘记”不可见节点
    • 在使元素可见时，您可能错误地设置了错误的“显示”样式-例如，某些div默认为“display:flex”，但您将错误地使用
      display:invisible>设置“display:block”块“：“无”
      这可能会破坏布局
    • 使用
      someBoolean&&
      非常容易理解和推理，尤其是当与显示内容或不显示内容相关的逻辑变得复杂时
    • 在许多情况下，您希望在元素状态重新出现时“重置”它。您可能有一个要设置为ini的滑块 
      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 />}

      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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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