admin管理员组

文章数量:1386711

I'm trying to use transitions within my react app, but each time I try to use any transition module this error es up: "TypeError: Cannot read property 'style' of undefined",

(anonymous function) node_modules/@material-ui/core/esm/Fade/Fade.js:83

  80 |     style: _extends({
  81 |       opacity: 0,
  82 |       visibility: state === 'exited' && !inProp ? 'hidden' : undefined
> 83 |     }, styles[state], style, children.props.style),
     | ^  84 |     ref: handleRef
  85 |   }, childProps));
  86 | });

I've tried not using es6 class style method, which actually fixes the problem, but I want to use es6 classes.

I think it has something to do with the styles variable which I define at the top like so:

const styles = theme => ({
    typography: {
        marginTop: theme.spacing(2)
    }
});

class IndexPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: false,
        }
    }

    render() {
        const {classes} = this.props;

        return (
            <React.Fragment>
                <Typography className={classes.typography} align={"center"} variant={"h2"} ponent={"h2"}>
                    <Fade in={this.state.checked}>
                        Wele to my Portfolio!
                    </Fade>
                </Typography>
            </React.Fragment>
        )
    }
}

IndexPage.propTypes = {
    styles: PropTypes.object.isRequired,
};

export default withStyles(styles)(IndexPage);

I expect the text inside the typography tag to Fade in, but the App crashes.

I'm trying to use transitions within my react app, but each time I try to use any transition module this error es up: "TypeError: Cannot read property 'style' of undefined",

(anonymous function) node_modules/@material-ui/core/esm/Fade/Fade.js:83

  80 |     style: _extends({
  81 |       opacity: 0,
  82 |       visibility: state === 'exited' && !inProp ? 'hidden' : undefined
> 83 |     }, styles[state], style, children.props.style),
     | ^  84 |     ref: handleRef
  85 |   }, childProps));
  86 | });

I've tried not using es6 class style method, which actually fixes the problem, but I want to use es6 classes.

I think it has something to do with the styles variable which I define at the top like so:

const styles = theme => ({
    typography: {
        marginTop: theme.spacing(2)
    }
});

class IndexPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: false,
        }
    }

    render() {
        const {classes} = this.props;

        return (
            <React.Fragment>
                <Typography className={classes.typography} align={"center"} variant={"h2"} ponent={"h2"}>
                    <Fade in={this.state.checked}>
                        Wele to my Portfolio!
                    </Fade>
                </Typography>
            </React.Fragment>
        )
    }
}

IndexPage.propTypes = {
    styles: PropTypes.object.isRequired,
};

export default withStyles(styles)(IndexPage);

I expect the text inside the typography tag to Fade in, but the App crashes.

  • javascript
  • reactjs
  • material-ui
Share Improve this question edited Jul 4, 2019 at 15:33 Dennis Vash 54k12 gold badges117 silver badges132 bronze badges asked Jul 4, 2019 at 15:10 Ezrab_Ezrab_ 1,0037 gold badges22 silver badges49 bronze badges 1
  • 4 I think the transition expects one child ponent. Happened to me when I try to fade in multiple divs – Taylor A. Leach Commented Jan 28, 2020 at 16:23
Add a ment  | 

1 Answer 1

Reset to default 4

Fade the Typography ponent:

<React.Fragment>
  <Fade in={this.state.checked}>
    <Typography
      className={classes.typography}
      align={"center"}
      variant={"h2"}
      ponent={"h2"}
    >
      Wele to my Portfolio!
    </Typography>
  </Fade>
</React.Fragment>;

For example:

export default function App() {
  return (
    <FlexBox>
      <Fade in={true}>
        <Typography>Wele</Typography>
      </Fade>
    </FlexBox>
  );
}

本文标签：

版权声明：本文标题：javascript - How to fix &#39;TypeError: Cannot read property &#39;style&#39; of undefined&#39; error when using 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744557820a2612584.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。