Airbnb JS Style Guide 和 history.push 没有结合答案

【问题标题】：Airbnb JS StyleGuide & history.push don't combineAirbnb JS Style Guide 和 history.push 没有结合
【发布时间】：2018-10-31 13:01:39
【问题描述】：

我正在编写一个 React 应用程序，即导航栏。我在那里有一个徽标和导航项。导航栏背景的徽标显示和颜色是有条件的。为 esLint 添加了 Aibnb 指南，现在我的导航栏代码如下所示：

class Toolbar extends Component {
    handleClick = () => {
        this.props.history.push('/');
    }

    render() {
        const { color, showLogo } = this.props;
        return (
            <header
                style={{
                    backgroundColor: color,
                }}
                className={classes.Toolbar}
            >
                <Logo click={this.handleClick} show={showLogo} />
                <NavItems />
            </header>
        );
    }
}

Toolbar.propTypes = {
    color: PropTypes.string.isRequired,
    showLogo: PropTypes.string.isRequired,
};

export default withRouter(Toolbar);

我收到以下 eslint 错误：

（第 11 行）是

this.props.history.push('/');

如何转换此方法以使代码编译并正常工作？

（试图将其重写为破坏性的道具分配，得到一个错误，例如无法获得未定义的“推送”）

【问题讨论】：

标签： reactjs eslint-config-airbnb

【解决方案1】：

设置history PropType 将帮助您摆脱错误：

Toolbar.propTypes = {
  color: PropTypes.string.isRequired,
  showLogo: PropTypes.string.isRequired,
  history: PropTypes.shape({
    push: PropTypes.func.isRequired,
  }).isRequired,
};

【讨论】：

【解决方案2】：

你应该更新

Toolbar.propTypes = {
color: PropTypes.string.isRequired,
showLogo: PropTypes.string.isRequired,
history:PropTypes.node
};

或

const {history} = this.props

更新

history:PropTypes.shape({push:PropTypes.func})

【讨论】：