如何使用自定义 JSX 元素？

JSX 是 JavaScript 语言的扩展，可用于编写 React 应用程序。 JSX 由标签、属性和子元素组成。我们还可以在 React 中创建自己的自定义元素。

自定义元素在 JSX 文件中为我们提供了一个新的 HTML 标记，我们可以通过本机浏览器 API 对其进行控制。

创建反应应用程序

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app example

第 2 步：创建项目文件夹（即示例）后，使用以下命令移动到该文件夹：

cd example

第 3 步：在 react 项目目录的 src 文件夹中创建文件夹组件，并在 components 文件夹中创建文件 Counter.jsx 和 ImperativeCounter.jsx

项目结构：它将如下所示。

示例：在 Index.js、App.js、Counter.jsx 和 ImperativeCounter.jsx 中写下以下代码

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import "./components/ImperativeCounter";
import reportWebVitals from './reportWebVitals';
  
ReactDOM.render(
    
        
    ,
    document.getElementById('root')
);

应用程序.js

import React from 'react';
import Counter from './components/Counter';
  
function App() {
    return (
        

            
        
    );
}
  
export default App;

计数器.jsx

import React, { useRef } from 'react'
  
function Counter() {
  
    const counterElement = useRef(null);
  
    const incrementCounters = () => {
  
        // Increment the imperative counter
        counterElement.current.increment();
    }
  
    const decrementCounters = () => {
  
        // Decrement the imperative counter
        counterElement.current.decrement();
    }
  
    return (
        

            

                
Imperative Counter
                
                
            
            
                    Increment
                
            
                    Decrement
                
        
    )
}
  
export default Counter

ImperativeCounter.jsx

class ImperativeCounter extends HTMLElement {
    constructor() {
        super();
        this.shadow = this.attachShadow({ mode: 'open' });
        this.currentCount = 0;
        this.update();
    }
  
    update() {
        const template = `
        
        

          Count: ${this.currentCount}
        
      `;
        this.shadow.innerHTML = template;
    }
  
    increment() {
        this.currentCount++;
        this.update();
    }
  
    decrement() {
        this.currentCount--;
        this.update();
    }
}
  
window.customElements.define('i-counter', ImperativeCounter);

最初，我们要做的是定义并形成一个自定义元素。为此，我们创建一个扩展 HTMLElement 类的类，然后使用 customElements.define() 给出元素的名称。

Javascript

class ImperativeCounter extends HTMLElement {
    // lines of code
}
window.customElements.define('i-counter', ImperativeCounter);

现在，既然我们已经设置并定义了自定义元素，我们就可以使用它了。

我们可以用 react 中的自定义元素做更多的事情。我们有三种方法来扩展使用自定义创建的这个元素的功能。有两个类似生命周期的方法对我们有用，即 disconnectedCallBack 和 connectedCallback，因为这是一个类，所以它带有一个构造函数。

构造函数：正在创建或升级的元素的实例。用于初始化状态、设置事件监听器或创建 Shadow DOM。有关您可以在构造函数中执行的操作的限制，请参阅规范。

connectedCallback：元素被插入到 DOM 中。对于运行设置代码很有用，例如获取资源或呈现 UI。一般来说，你应该尽量把工作推迟到这个时候

disconnectedCallback：当元素从 DOM 中移除时。对于运行清理代码很有用。

让我们制作一个带有属性的自定义元素。

Javascript

class ImperativeCounter extends HTMLElement {
    constructor() {
        super();
        this.shadow = this.attachShadow({ mode: 'open' });
        this.currentCount = 0;
        this.update();
    }
}
  
window.customElements.define('i-counter', ImperativeCounter);

现在，我们将向这个类添加一个函数来更新、递增和递减。

Javascript

class ImperativeCounter extends HTMLElement {
    constructor() {
        super();
        this.shadow = this.attachShadow({ mode: 'open' });
        this.currentCount = 0;
        this.update();
    }
  
    update() {
        const template = `
        
        

          Count: ${this.currentCount}
        
      `;
        this.shadow.innerHTML = template;
    }
  
    increment() {
        this.currentCount++;
        this.update();
    }
  
    decrement() {
        this.currentCount--;
        this.update();
    }
}
  
window.customElements.define('i-counter', ImperativeCounter);

Javascript

class profile extends HTMLElement {
    constructor() {
        super();
  
        this.profileDetails = null;
  
        this.name = this.getAttribute("name");
        this.endpoint = 
            `https://api.github.com/repos/${this.name}`
        this.innerHTML = `
Loading
`
    }
    async getDetails() {
        return await fetch(this.endpoint, 
        { mode: "cors" }).then(res => res.json());
    }
}

最后，我们创建了自定义元素 ，现在我们可以在 jsx aap 中使用它。

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：

输出

在那里，我们创建了一个自定义元素，该元素管理自己的状态并将该状态反映给用户，同时为我们提供了一个 HTML 元素以在 JSX 中使用。