问withStyles组件封装

EN

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import SnackbarContent from '@material-ui/core/SnackbarContent';
import Snackbar from '@material-ui/core/Snackbar';

const styles = theme => ({
  error: {
    backgroundColor: theme.palette.error.dark,
  }
})

class Snack extends React.Component {

  state = {
    opendialog: false,
  }

  constructor(props) {
    super(props);
  }

  test() {
    this.setState({opendialog: !this.state.opendialog});
  }

  render() {
    return (
      <Snackbar open={this.state.opendialog}>
        <SnackbarContent message="test"/>
      </Snackbar>
    );
  }
}

export default withStyles(styles)(Snack);

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

class App extends Component {
  constructor(props) {
    super(props);
    this.snack = React.createRef();
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
            <Button variant="contained" color="primary" onClick={this.handleHello}>Hello World</Button>
            <div>
            <Snack ref={ ref => this.snack = ref } />
            </div>
      </div>
    );
  }
  handleHello = () => {
    this.snack.test();
  }
}

export default App;