Javascript 如何使用React隐藏按钮

我是新的反应，我想隐藏一个按钮后，点击。下面的两个代码段是PropType。我需要有一个隐藏按钮吗？单击后如何隐藏按钮？我读到我可以通过状态或css来完成。因为这是一个按钮，所以使用css似乎更容易？如果您有任何帮助，我们将不胜感激。

请参阅本手册，了解如何有条件地隐藏元素：

基本概念是在渲染中执行此操作

  render: function() {
    return (<div>
    {this.state.clicked && <div>Shown or hidden?</div>}
    </div>);
  }

render:function（）{
返回(
{this.state.clicked&&显示或隐藏？}
);
}

其思想是，您依赖组件状态来决定是否应该渲染任何内容。您可以操纵强制重新渲染组件的状态

我认为这是一种比使用css“更好”的方法，但是css也有它的用途。（这可以用来有条件地向元素添加一个“隐藏”类）

/*eslint disable jsx-a11y/img has alt，class方法使用它*/
从“React”导入React，{Component}；
从“道具类型”导入道具类型；
从'src/style/todo style.scss'导入todoStyle；
从“react Router”导入{Router，Route，hashHistory as history}；
从'src/components/Myaccount.jsx'导入Myaccount；
导出默认类Headermenu扩展组件{
构造函数（）{
超级（）；
//初始状态
this.state={open:false}；
}
切换（）{
这是我的国家({
打开：！this.state.open
});
}
componentdidMount（）{
this.menuclickevent=this.menuclickevent.bind（this）；
this.collapse=this.collapse.bind（this）；
this.myaccount=this.myaccount.bind（this）；
this.logout=this.logout.bind（this）；
}
render（）{
返回(
菜单
我的帐户
注销
);
}
menuclickevent（）{
const listmenu=document.getElementById（'listmenu'）；
listmenu.style.display='block'；
}
注销（）{
console.log（“注销”）；
}
我的帐户（）{
history.push（'/myaccount'）；
window.location.reload（）；
}
}
在这里输入代码

添加状态

{shouldShowButton:true}

，单击更改状态<代码>{shouldShowButton:false}然后添加类。

className={shouldShowButton？''hidden'}

可能会对您有所帮助。代码缺乏解释，当然解决方案也缺乏在反应方面应该如何做。Patrick的回答是按React的方式做，好像有一个断开的CDN链接

    /* eslint-disable jsx-a11y/img-has-alt,class-methods-use-this */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import todoStyle from 'src/style/todo-style.scss';
import { Router, Route, hashHistory as history } from 'react-router';
import Myaccount from 'src/components/myaccount.jsx';

export default class Headermenu extends Component {

  constructor(){
  super();

  // Initial state
  this.state = { open: false };

}

toggle() {
  this.setState({
    open: !this.state.open
  });
}

  componentdidMount() {
    this.menuclickevent = this.menuclickevent.bind(this);
    this.collapse = this.collapse.bind(this);
    this.myaccount = this.myaccount.bind(this);
    this.logout = this.logout.bind(this);
  }

  render() {
    return (
      <div>

        <div style={{ textAlign: 'center', marginTop: '10px' }} id="menudiv" onBlur={this.collapse}>
          <button onClick={this.toggle.bind(this)} > Menu </button>

          <div id="demo" className={"collapse" + (this.state.open ? ' in' : '')}>
            <label className="menu_items" onClick={this.myaccount}>MyAccount</label>
            <div onClick={this.logout}>
              Logout
            </div>
          </div>

        </div>
      </div>
    );
  }

  menuclickevent() {
    const listmenu = document.getElementById('listmenu');
    listmenu.style.display = 'block';
  }



  logout() {
    console.log('Logout');
  }
  myaccount() {
    history.push('/myaccount');
    window.location.reload();

  }


}

enter code here