javascript - 使用状态在 React 中显示/隐藏组件

Question

我试图在检查状态值时隐藏/显示组件:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Button from '@material-ui/core/Button'

class App extends Component {
    constructor(props) {
        super(props);
        this.state = true;
    }

    render() {    
        return (
          <div className="App">
            {this.state && <Button variant="raised" onClick={this.state=false}>Button</Button>}

          </div>
        );
    }
}

export default App;

我不知道错误/错误代码在哪里，但渲染似乎没有刷新。

Answer 1

您使用不当。你必须像这样初始化状态

constructor(props) {
  super(props);
  this.state = {show: true}
}

然后像这样渲染

return (
    <div className="App">
        {this.state.show && <Button variant="raised" onClick={() => this.setState({show:false})}>Button</Button>}

      </div>
);