jsx-eslint/eslint-plugin-react

Rule Proposal: Check for global references inside `render`

Open

#246 建立於 2015年10月13日

在 GitHub 查看
 (4 留言) (0 反應) (0 負責人)JavaScript (8,630 star) (2,797 fork)batch import
acceptedhelp wantednew rule

描述

When using React for server rendering, it can be problematic when a component relies on window or document or other globals inside of render. It will cause checksum issues when you get to the client. Instead of checking whether you are on the client within render, it's better to use the componentDidMount lifecycle event to set a state which is used in render instead.

Problematic:

class Foo extends React.Component {
    render() {
        if (typeof window === 'undefined') {
            return null;
        }
        return <Bar />;
    }
}

Better:

class Foo extends React.Component {
    constructor() {
        this.state = {showBar: false};
    }
    componentDidMount() {
        this.setState({showBar: true});
    }
    render() {
        if (!this.state.showBar) {
            return null;
        }
        return <Bar />;
    }
}

貢獻者指南