React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. El componente DOMHelper manipula directamente el DOM para algunas consideraciones. Podemos usar el siguiente enfoque en ReactJS para usar el componente DOMHelper de React Suite.
DOMMouseMoveTracker: se utiliza para el rastreador de arrastre del mouse. Este método toma los siguientes parámetros:
- onMove: Es una función que se dispara cuando el movimiento está activo.
- onMoveEnd: Es una función que se dispara cuando se detiene el movimiento.
- Node: se utiliza para denotar el elemento HTML.
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 @rsuite/charts
Estructura del proyecto: Tendrá el siguiente aspecto.
Ejemplo 1: En el siguiente ejemplo, hemos utilizado el método addTheStyling para agregar el estilo a nuestro elemento con solo hacer clic en el botón.
Nombre de archivo: App.js
App.js
import React from 'react' import 'rsuite/dist/styles/rsuite-default.css'; import { Button, DOMHelper } from 'rsuite'; const { addStyle } = DOMHelper; export default class App extends React.Component { // State holding initial style constructor(props) { super(props); this.state = { htmlCode: '<div class="view"></div>' }; } // Function to set the states with latest style showView() { const htmlCode = this.container.innerHTML; this.setState({ htmlCode }); } // Function to add the styles addTheStyling() { addStyle(this.view, { 'margin-top': '16px', 'color': 'orange' }); this.showView(); } render() { const { htmlCode } = this.state; return ( <div> <h4>React Suite DOMHelper Component</h4> <Button appearance="primary" onClick={() => this.addTheStyling()} > Click to Add Style </Button> <div>{htmlCode}</div> <div ref={ref => { this.container = ref }}> <div className="view" ref={ref => { this.view = ref }} /> </div> </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:
Ejemplo 2: en el siguiente ejemplo, hemos utilizado el método hasClass para verificar si el elemento tiene una clase con nombre personalizado o no, esta función se activa cuando el usuario hace clic en el botón.
Nombre de archivo: App.js
suite
import React from 'react' import 'rsuite/dist/styles/rsuite-default.css'; import { Button, DOMHelper } from 'rsuite'; const { hasClass } = DOMHelper; export default class App extends React.Component { // State holding initial style constructor(props) { super(props); this.state = { htmlCode: `<div class="view" style="font-size: 16px; color: orange;"></div>` }; } render() { const { htmlCode } = this.state; return ( <div> <h4>React Suite DOMHelper Component</h4> <Button appearance="primary" onClick={() => alert(hasClass(this.view, 'custom'))} > Click me to check hasClass method </Button> <div>{htmlCode}</div> <div ref={ref => { this.container = ref }}> <div className="view" ref={ref => { this.view = ref }} /> </div> </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://rsuitejs.com/components/dom-helper/
Publicación traducida automáticamente
Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA