如何在 React 中划掉（删除线）文本

作者

目录

How to cross out (Strikethrough) Text in React

  1. 在 React 中划掉（删除线）文本
  2. 在 React 中单击时划掉（删除线）文本

在 React 中划掉（删除线）文本

使用该textDecoration属性在 React 中为文本添加删除线，例如
<span style={{textDecoration: 'line-through'}}>. CSS 属性设置文本装饰线的text-decoration外观。

应用程序.js
const App = () => {
  return (
    <div>
      <h2>
        <span style={{textDecoration: 'line-through'}}>Hello</span> world
      </h2>
    </div>
  );
};

export default App;

反应删除线文本

如果您需要在单击时划掉某个元素，请向下滚动到下一个副标题。

我们使用
text-decoration
属性在 React 中划掉文本。

请注意，当指定为内联样式时，多词属性是驼峰式的。

内联样式中的第一组花括号标记表达式的开始，第二组花括号是包含样式和值的对象。

应用程序.js
<span style={{textDecoration: 'line-through'}}>Hello</span> world

当textDecoration元素的属性设置为 时line-through，它的文本被划掉。

如果您需要经常这样做，您可以将 span 元素提取到呈现其子元素的组件中。

应用程序.js
function StrikethroughText({children}) {
  return <span style={{textDecoration: 'line-through'}}>{children}</span>;
}

const App = () => {
  return (
    <div>
      <h2>
        <StrikethroughText>Hello</StrikethroughText> world
      </h2>
    </div>
  );
};

export default App;

此代码示例实现了相同的结果。无论我们在组件的开始标签和结束标签之间传递什么，StrikethroughText都会将其文本划掉。

另一种解决方案是在全局
文件中定义一个strikethrough类。css

应用程序.css
.strikethrough {
  text-decoration: line-through;
}

下面是我们将如何导入App.css文件和使用strikethrough
类。

应用程序.js
import './App.css';

const App = () => {
  return (
    <div>
      <h2>
        <span className="strikethrough">Hello</span> world
      </h2>
    </div>
  );
};

export default App;

css这种方法使我们能够通过在全局文件中定义常用样式来重用它们。

css将全局文件导入文件中是最佳做法，index.js因为这样它们就不会仅在安装某个组件时才加载。

在 React 中点击时划掉（删除线）文本#

要在 React 中点击时划掉文本：

  1. onClick在元素上设置道具。
  2. 单击该元素时，检查其text-decoration属性是否已设置。
  3. 如果设置了该属性，则将其删除，否则将其设置为line-through。
应用程序.js
const App = () => {
  const handleClick = event => {
    if (event.target.style.textDecoration) {
      event.target.style.removeProperty('text-decoration');
    } else {
      event.target.style.setProperty('text-decoration', 'line-through');
    }
  };

  return (
    <div>
      <p onClick={handleClick}>Walk the dog</p>

      <br />

      <p onClick={handleClick}>Buy groceries</p>
    </div>
  );
};

export default App;

单击反应删除线

我们onClick在段落元素上设置，因此每次单击它们时，handleClick都会调用该函数。

target对象上的属性event指的是被单击的特定段落标记。

我们首先检查该textDecoration属性是否设置在元素的样式对象中。

如果设置了属性，我们使用
removeProperty
方法将其删除。

如果textDecoration未设置属性，我们使用
setProperty
方法划掉文本。

这具有切换段落标记上的删除线样式的效果。

您可以onClick根据需要在尽可能多的元素上设置 prop 并使用相同的
handleClick函数，因为它使用该event对象来获取对被单击元素的引用。

–