Question

我用以下代码编写了一个网站。在这里，我想使用className = {this.classes.sosbutton}设置按钮的样式，但这会引发错误

TypeError：无法读取未定义的属性“ sosbutton”

如果您对改善样式有任何建议，请告诉我。

此外，我想使用connect函数同时使用withRouter和withStyles。我已将react-redux添加到我的项目中，如下所示：npm install --save react-redux

但是，当我在第4行中导入它时，总是出现以下错误：

未找到模块：无法在其中解析“ react-redux” 'C：\ Users \ Alexa \ Documents \ Repository \ mpd-airbus-frontend \ src \ Landing'

import React from 'react'; 
import { withRouter } from 'react-router-dom'; 
import Button from '@material-ui/core/Button'; 
import { withStyles } from '@material-ui/core/styles'; 
import { connect } from 'react-redux';

const styles = theme => ({   sosbutton: {
    background: 'e45050ff',
    'text-align': 'center',
    'margin-top': '30px',
    height: '80%',
    width: '100%'   } });

class SOSButton extends React.Component {   constructor(props) {
    super(props);
    this.classes = props.classes;
    this.state = {
      timerOn: false
    };
    this.timerStart = this.timerStart.bind(this);
    this.timerStop = this.timerStop.bind(this);
    this.tick = this.tick.bind(this);
    this.counter = 3;
    this.counterStep = 1;   }

  timerStart() {
    this.timerID = setInterval(() => this.tick(), 1000);
    this.setState({ timerOn: true });   }

  timerStop() {
    clearInterval(this.timerID);
    this.counter = 3;
    this.setState({ timerOn: false });
    this.props.history.push('/');   }

  tick() {
    this.counter = this.counter - this.counterStep;
    if (this.counter <= 0) {
      this.setState({ timerOn: false });
      this.timerStop();
      this.props.onSubmit();
      this.props.history.push('/emergency_sent');
    } else {
      this.setState({ timerOn: true });
    }
    console.log(this.counter);   }

  render() {
    let timerOn = this.state.timerOn;
    let button;

    if (timerOn) {
      button = (
        <div>
          You have {this.counter} seconds to cancel the emergency SOS. <br />
          <br />
          <Button size="large" color="primary" onClick={this.timerStop}>
            Press here to cancel emergency call!
          </Button>
        </div>
      );
    } else {
      button = (
        <Button className={this.classes.sosbutton} onClick={this.timerStart}>
          GET HELP NOW!
        </Button>
      );
    }

    console.log(button);
    return button;   } }

export default withRouter(connect()(withStyles(styles)(SOSButton))); //export default withRouter(SOSButton); //export default withStyles(withRouter(SOSButton)); //<Button className="emergencybutton" onClick={this.timerStart}>

React：应用样式并使用connect（）

0 个答案: