weizheng
weizheng

Reputation: 1

react There was a syntax error in creating components

react Create components to prompt errors

This is the code.

import {React,PureComponent} from 'react';
export default class chainRefeshTool extends React.PureComponent {
    render() {
        return (
            <div>
                <h1>Hello World!</h1>
            </div>
        );
    }
}

我想输出hello word! 但是页面报错 I want to output Hello word! But the page is wrong. 报错信息如下The error information is as follows:

./src/pages/BackStage/ChainRefeshTool/index.js

Line 4: Your render method should have return statement react/require-render-return

Line 5: Expected an assignment or function call and instead saw an expression no-unused-expressions

Line 5: Missing semicolon semi

Search for the keywords to learn more about each error.

Upvotes: 0

Views: 113

Answers (2)

Aakash_Sardana
Aakash_Sardana

Reputation: 270

The problem here is with you import statement. It should be as follows

import React, { PureComponent } from 'react';

Moreover, when you are extending PureComponent it should be like this:

export default class chainRefeshTool extends PureComponent {

This is because you already imported PureComponent as named export from react. That's why no need to use React.PureComponent while extending.

Upvotes: 0

chipit24
chipit24

Reputation: 6987

There's nothing wrong with your code, but your import statement is incorrect; it should be:

import React, { PureComponent } from 'react';

Then you can simply extend PureComponent instead of React.PureComponent:

import React, { PureComponent } from 'react';

export default class chainRefeshTool extends PureComponent {
    render() {
        return (
            <div>
                <h1>Hello World!</h1>
            </div>
        );
    }
}

There's also nothing wrong with just using the default React export:

import React from 'react';

export default class chainRefeshTool extends React.PureComponent {
    render() {
        return (
            <div>
                <h1>Hello World!</h1>
            </div>
        );
    }
}

Upvotes: 1

Related Questions