ReactJs 如何给文本添加删除线

在本文中，我们将看到使用ReactJs有效地添加删除线到文本的各种技术。 删除线文本 ，也称为划掉或删除的文本，是一种在ReactJS应用程序中用于指示过时或不相关内容的格式化样式。

在ReactJs中添加删除线的方法

使用CSS
使用React状态操作实现悬停效果

前提条件

了解React
React Hooks
NPM或NPX

创建一个React应用的步骤

步骤1： 通过使用以下命令创建一个React应用

npx create-react-app strikethroughapp

步骤2: 创建项目文件夹，比如strikethroughapp之后，使用以下命令切换到该文件夹

cd strikethroughapp

项目结构：

ReactJs 如何给文本添加删除线

使用CSS在文本中添加删除线的方法

本方法使用CSS来为文本添加删除线效果。当应用“strikethrough”类到已完成任务的列表中（比如待办事项列表），它会触发一个显示已划掉线的文本的视觉效果，使用CSS的 “line-through”文本装饰 属性实现。这有效地标记了任务已完成。

示例： 给出的React示例演示了一个组件，展示了具有删除线样式的已完成任务列表。这些任务被存储在一个数组中。设计中以绿色突出显示居中的标题，并包含段落。此外，列表项居中显示，并通过删除线外观进行视觉修饰。

App.js文件

import React from 'react'; 
  
function App() { 
  
    // Array of completed tasks 
    const completedTasks = ['Task A', 'Task B', 'Task C']; 
  
    // Style for the strikethrough list items 
    const listItemStyle = { 
        textDecoration: 'line-through', 
        marginBottom: '8px', 
        fontSize: '16px', 
        color: '#555', 
    }; 
  
    const completedTasksHeadingStyle = { 
        marginBottom: '16px', 
        color: '#333', 
        textAlign: 'center', 
    }; 
  
    const heading = { 
        marginBottom: '16px', 
        textAlign: 'center', 
        color: 'green', 
    }; 
  
    const listContainerStyle = { 
        listStyle: 'none', 
        paddingLeft: '0', 
        textAlign: 'center',  // Center align the list 
    }; 
  
    return ( 
        <div> 
            <h1 style={heading}>Geeksforgeeks</h1> 
  
            <h2 style={completedTasksHeadingStyle}> 
                Completed Tasks: 
            </h2> 
  
            {/* List of Completed Tasks */} 
            <ul style={listContainerStyle}> 
                {completedTasks.map((task, index) => ( 
                    <li key={index} style={listItemStyle}> 
                        {task} 
                    </li> 
                ))} 
            </ul> 
        </div> 
    ); 
} 
  
export default App;

运行步骤

要打开应用程序，请使用终端并输入下面列出的命令

npm start  
或者
npm run start

输出 :

ReactJs 如何给文本添加删除线

使用React状态在文本上添加悬停效果删除线

在这种方法中，我们将使用React状态来创建悬停效果。当用户悬停在文本上时，状态变量切换，改变文本的内联样式。这种操作会触发“line-through”属性，创建删除线效果，有效突出UI元素的交互性质。

示例： 提供的React示例展示了一个在UI中创建强烈视觉效果的组件。当悬停在段落上时，它切换了删除线效果。这个功能利用React的状态和事件处理能力来监视主机状态的变化。此外，段落采用居中对齐和指针光标样式，确保直观的用户体验。

App.js

import React, { useState } from 'react'; 
  
function App() { 
  
    // State to track whether the paragraph is hovered 
    const [isHovered, setIsHovered] = useState(false); 
  
    // Event handler for hovering over the paragraph 
    const handleHover = () => { 
        setIsHovered(!isHovered); 
    }; 
  
    const paragraphStyle = { 
        display: 'flex', 
        justifyContent: 'center', 
        alignItems: 'center', 
        fontSize: '24px', 
        color: '#333', 
        cursor: 'pointer', 
    }; 
  
    const heading = { 
        marginBottom: '16px', 
        textAlign: 'center', 
        color: 'green', 
    }; 
  
    // Style for the strikethrough effect 
    const strikethroughStyle = { 
        textDecoration: 'line-through', 
    }; 
  
    return ( 
        <div> 
            <h1 style={heading}>Geeksforgeeks</h1> 
  
            <p onMouseEnter={handleHover}  
               onMouseLeave={handleHover}  
               style={paragraphStyle}> 
                {isHovered ? ( 
                    <span style={strikethroughStyle}> 
                        Hover me to strikethrough 
                    </span> 
                ) : ( 
                    'Hover me to see the effect'
                )} 
            </p> 
        </div> 
    ); 
} 
  
export default App;