reactjs - withStyles 组件包装

Question

我有以下组件：

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;

单击按钮时，我收到“TypeError：_this.snack.test 不是函数”，但是如果我删除 withStyles，则代码可以正常工作。

我只是替换“export default withStyles(styles)(Snack);” 符合“导出默认（小吃）；”。

为什么它不能与“withStyles”一起正常工作？我怎样才能让它工作？

标签： reactjsmaterial-ui

Answer 1

因为withStyles包装了您的组件，所以您需要改用：

<Snack innerRef={ref => (this.snack = ref)} />

withStyles将innerRef属性作为ref.

我尝试使用最新版本@material-ui/core（当前为 3.8.1）。我不能保证旧版本以同样的方式支持这一点。

这是一个完整的工作示例：