withStyles组件包装

Question

我有以下内容：

patch i v xs = left ++ [v] ++ drop 1 right where (left, right) = splitAt i xs

和应用主程序：

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

单击按钮时出现“ TypeError：_this.snack.test不是函数”，但是，如果放下withStyles，则代码可以正常工作。

我只是替换为“使用Styles（styles）（Snack）;导出默认值”；与“导出默认值（小吃）；”一致。

为什么它不能与“ withStyles”一起正常使用？我该如何运作？

Answer 1

问题是因为remotes::install_github('yihui/knitr') HOC返回了一个新的组件，因此您正在获得HOC的引用。您可以使用withStyles道具：

innerRef

根据官方文档：

  

它添加了innerRef属性，因此您可以获取对包装组件的引用。 innerRef的用法与ref相同。

您可以使用样式函数在官方文档here中对其进行检查。

我已经使用您当前的版本对其进行了测试，

Answer 2

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

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

withStyles将innerRef属性作为ref传递给包装的组件。

我使用@material-ui/core的最新版本（当前为3.8.1）进行了尝试。我不能保证较早的版本以相同的方式支持此功能。

这是一个完整的示例：