react 判断字符串是否包含多种符号并根据符号渲染对应dom

在React中，你可以使用JavaScript的条件渲染（Conditional Rendering）结合正则表达式（RegExp）来判断字符串是否包含特定的符号，并根据符号的不同生成对应的DOM结构。以下是一个简单的例子：

import React from 'react';

const CustomComponent = ({ stringToCheck }) => {
  const symbolsAndDOMs = {
    '@': <span className="symbol-at">@</span>,
    '#': <span className="symbol-hash">#</span>,
    '*': <span className="symbol-star">*</span>, // 添加更多符号和对应DOM
  };

  // 创建一个函数来检查字符串是否包含特定的符号
  const checkSymbol = (str) => {
    for (let symbol in symbolsAndDOMs) {
      if (str.includes(symbol)) {
        return true;
      }
    }
    return false;
  };

  // 根据检查结果渲染DOM
  return (
    <>
      {checkSymbol(stringToCheck)
        ? Object.values(symbolsAndDOMs).map((dom) => dom)
        : <div>No specific symbols found.</div>}
    </>
  );
};

export default CustomComponent;