Componente de mensaje de diseño de hormiga de la interfaz de usuario de ReactJS

. En rMessage, el componente se usa para mostrar. Podemos usar el siguiente enfoque en ReactJS para usar el componente de mensaje de diseño Ant.

Accesorios de mensaje:

• contenido: Se utiliza para denotar el contenido del mensaje.
• duración: se utiliza para indicar el tiempo en segundos antes de descartar automáticamente, no descartar si se establece en 0.
• onClose: es una función de devolución de llamada que se activa cuando se cierra el mensaje.

Props de configuración de mensajes:

• className: Se utiliza para la clase CSS personalizada.
• contenido: Se utiliza para denotar el contenido del mensaje.
• duración: se utiliza para indicar el tiempo en segundos antes de descartar automáticamente, no descartar si se establece en 0.
• icon: Se utiliza para el icono personalizado.
• clave: Se utiliza para la identificación única del Mensaje.
• estilo: Se utiliza para el estilo en línea personalizado.
• onClick: es una función de devolución de llamada que se activa cuando se hace clic en el mensaje.
• onClose: es una función de devolución de llamada que se activa cuando se cierra el mensaje.

Props predeterminados de configuración de mensajes:

• duración: se utiliza para indicar el tiempo en segundos antes del cierre automático.
• getContainer: se utiliza para devolver el Node de montaje de Message.
• maxCount: se utiliza para indicar el mensaje máximo que se muestra.
• prefixCls: se utiliza para el prefijo className del Node de mensaje.
• rtl: Se utiliza para indicar si habilitar o no el modo RTL.
• top: Se utiliza para indicar la distancia desde la parte superior.

Método estático global:

• message.config(options): Este método se utiliza para la configuración global de mensajes. Toma el objeto de opciones como un parámetro cuyas propiedades se explican anteriormente (consulte las propiedades predeterminadas de configuración de mensajes).
• message.destroy(): este método se utiliza para eliminar un mensaje. Este método no toma ningún parámetro.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install antd

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react'
import "antd/dist/antd.css";
import { Button, message } from 'antd';
  
export default function App() {
  
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Message Component</h4>
      <>
        <Button type="primary" 
          onClick={() => {
          message.info('Message Content!');
          }}
        >
        Click me to see Message
        </Button>
      </>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://ant.design/components/message/