时间戳

首页 > 解决方案 > 如何将错误显示添加到 React 组件

javascript - 如何将错误显示添加到 React 组件

问题描述

我的 React 应用程序中有许多工作组件。当组件（可以是整个窗口/表单）发现问题时，我想添加显示简单错误/警告消息的功能（为了简单起见，顶部只有一个 H1 元素）。

例如，在更改密码的表单中，最好有以下内容：

onSubmit(event) {
...
if (!this.state.password1 === this.state.password2) {
   this.showError("The passwords don´t match"}
...
}

我的第一个意图是使用继承，以这种方式定义一个超类：

export default class MostrarError extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: '' };
  }

  mostrarError(msg) {
    this.setState({ error: msg });
  }

  render() {
    return (
      <React.Fragment>
        {this.state.error ? <h1> UPS! {this.state.error} </h1> : null}
        this.props.children
      </React.Fragment>
    );
  }
}

但是，超级渲染（）方法永远不会被调用，因为每个子类都定义了自己的渲染（）。我可以使用某种方法模板，但它涉及修改所有子类。

这肯定是一个非常常见的问题，但我发现的大多数解决方案都使用了 Redux，但我无法使用它。

有人可以指出我的其他解决方案吗？

标签： javascriptreactjs

解决方案

我认为您正在寻找的是拥有一个可以与父组件通信并有条件地呈现自身的警报组件。

为什么不在你的父组件中做这样的事情

export default class ParentCompo extends React.Component{
   state = {
     error: false,
     errorMsg: ''
   }
   onSubmit = () => {
    if(this.state.password1 !== this.state.password2) {
       this.setState({error: true, errorMsg: 'Passwords dont match'})
    }   
   }
   render(){
      return (
         <div>
            <AlertCompo error={this.state.error} errorMsg={this.state.errorMsg} />
            Normal stuff here...
         </div>
      )
   }
}

您的警报组件应如下所示

export default class AlertCompo extends React.PureComponent{
    shouldComponentUpdate(nextProps){
        if(nextProps.error !== this.props.error){
            return true;
        }
        return false;
    }
    render(){
        if(this.props.error){
           return (
              <h1>Some alert message {this.props.errorMsg}</h1>
           )
        }else {
           return <React.Fragment />
        }
    }
}

推荐阅读