无需多容器或组件挂载的通用Message组件及容器

2023-11-20 14:10:35

React：像message.success()一样实现Message通用容器及Message组件

在开发React应用程序时，我们经常需要用到一些通用的组件，比如Message组件。Message组件可以用来显示各种类型的消息，比如成功、警告、错误等。通常情况下，我们需要为每个页面创建一个Message容器，然后在容器中挂载Message组件。这样一来，当我们需要在某个页面显示消息时，就可以直接在容器中调用Message组件的方法来显示消息。

但是，如果我们有多个页面都要用到Message组件，那么就会出现一个问题：我们需要为每个页面都创建一个Message容器。这不仅会增加代码量，还会降低代码的可重用性。为了解决这个问题，我们可以创建一个通用的Message容器，然后在需要用到Message组件的页面中直接引入这个容器。这样一来，我们就只需要编写一次Message容器的代码，就可以在多个页面中复用它。

下面，我们就来创建一个通用的Message容器和Message组件。

1. 创建Message容器

首先，我们需要创建一个Message容器。Message容器是一个React组件，它负责创建和管理Message组件。Message容器的代码如下：

import React from 'react';

class MessageContainer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      messages: [],
    };
  }

  addMessage(message) {
    this.setState({
      messages: [...this.state.messages, message],
    });
  }

  removeMessage(message) {
    this.setState({
      messages: this.state.messages.filter(m => m !== message),
    });
  }

  render() {
    return (
      <div>
        {this.state.messages.map((message) => (
          <Message message={message} key={message.id} />
        ))}
      </div>
    );
  }
}

export default MessageContainer;

2. 创建Message组件

接下来，我们需要创建一个Message组件。Message组件是一个React组件，它负责显示消息。Message组件的代码如下：

import React from 'react';

const Message = (props) => {
  return (
    <div className={`message ${props.message.type}`}>
      {props.message.content}
    </div>
  );
};

export default Message;

3. 使用Message容器和Message组件

现在，我们就可以在需要用到Message组件的页面中引入Message容器和Message组件了。在页面中，我们可以通过调用Message容器的addMessage()方法来添加消息，通过调用Message容器的removeMessage()方法来移除消息。

例如，在某个页面中，我们可以这样使用Message容器和Message组件：

import MessageContainer from './MessageContainer';
import Message from './Message';

class MyPage extends React.Component {
  constructor(props) {
    super(props);

    this.messageContainer = React.createRef();
  }

  componentDidMount() {
    this.messageContainer.current.addMessage({
      type: 'success',
      content: '操作成功！',
    });
  }

  render() {
    return (
      <div>
        <MessageContainer ref={this.messageContainer} />
      </div>
    );
  }
}

export default MyPage;