withStyles компонентная упаковка - PullRequest
Новая
       8

withStyles компонентная упаковка

0 голосов
/ 31 декабря 2018

У меня есть следующий компонент: 

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 is not function»кнопка, однако, если я отбрасываю withStyles, код работает правильно.

Я просто заменяю «экспорт по умолчанию с помощью Style (styles) (Snack);»строка с "export default (Snack);".

Почему это не работает правильно с "withStyles"?Как я могу заставить это работать?

Ответы [ 2 ]

0 голосов
/ 31 декабря 2018

Проблема в том, что withStyles HOC возвращает новый компонент, поэтому вы получаете ссылку на HOC.Вы можете использовать innerRef prop: 

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

Согласно официальной документации:

Добавляет свойство innerRef, чтобы вы могли получить ссылку на обернутый компонент.Использование innerRef идентично ref.

Вы можете проверить это в официальной документации здесь с функцией Style.

Я уже проверил это с вашей текущей версиейработает нормально

0 голосов
/ 31 декабря 2018

Поскольку withStyles оборачивает ваш компонент, вам нужно вместо этого использовать: 

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

withStyles передает свойство innerRef в обернутый компонент как ref.

Я пробовал это, используя последнюю версию @material-ui/core (в настоящее время 3.8.1).Я не могу гарантировать, что более старые версии поддерживают это таким же образом.

Вот полностью рабочий пример:

Edit 91v0klq4n4

...