如何替换反应中的字符串

Question

我正在使用表情符号 API，并且获得了像 U+1F425 这样的表情符号 unicode，以便能够在 jsx 中显示表情符号。我必须将 U+1F425 替换为 \u{1F425} ；基本上我只需要从 API 获取 1F425 。

表情符号.jsx

import React, { useEffect, useState } from "react";
import Sidebar from "../../Sidebar/Sidebar";
import "./Emoji.css";

const Emoji = ({ isAuth, setIsAuth }) => {
  const [type, setType] = useState([]);
  const getEmoji = () => {
    fetch("https://emojihub.herokuapp.com/api/all/group_animal_bird")
      .then((resp) => resp.json())
      .then((dat) => (console.log(dat), setType(dat)));
  };

  useEffect(() => {
    getEmoji();
    console.log(type);
  }, []);
  return (
    <>
              {type.map((emo) => (
                <>
                  <h6>{emo.name}</h6>
                  <span>{emo.unicode}</span> // This Not
                  <span>{"\u{1F985}"}</span> //This works
                </>
              ))}
    
    </>
  );
};

export default Emoji;

Answer 1

• 您可以使用函数替换接收到的数据中的格式，然后再将其渲染到 jsx 中。

• 根据您的情况，您可以尝试拆分字符串，将十六进制部分转换为 unicode 点，然后以所需的格式重新构建。

• 在midify代码中，convertUnicode函数接受Unicode字符串(U+1F425)并以(\u{iF425}格式返回。然后在getEmoji函数中，每个emo对象被映射以用Unicode字符替换unicode属性。

  import React, { useEffect, useState } from "react";
    从“../../Sidebar/Sidebar”导入侧边栏；
    导入“./Emoji.css”；
  
   const Emoji = ({ isAuth, setIsAuth }) =>; {
     const [类型，setType] = useState([]);
  
     const ConvertUnicode = (unicode) =>; {
       // 分割Unicode字符串并获取十六进制部分
       const hexString = unicode.split("U+")[1];
       // 将十六进制转换为十进制
       const DecimalCode = parseInt(hexString, 16);
       // 将十进制代码转换为 Unicode 字符
       返回 String.fromCodePoint(decimalCode);
     };
  
     const getEmoji = () =>; {
       fetch("https://emojihub.herokuapp.com/api/all/group_animal_bird")
         .then((resp) => resp.json())
         .then((dat) => setType(dat.map(emo => ({ ...emo, unicode:convertUnicode(emo.unicode) }))));
     };
  
     useEffect(() => {
       获取表情符号（）；
     }, []);
  
     返回 （
       <>
         {type.map((emo, 索引) => (
           
  
             
  {emo.name};
             {/* 渲染转换后的 Unicode */}
             {emo.unicode}
           
         ))}
       
     ）；
   };
  
   导出默认表情符号；
  

Answer 2

表情符号只不过是字符。
您必须将该代码转换为十六进制，然后将该十六进制代码转换为字符串。

 const res = '1F425';
// Convert your string to hex code
 const resHex = +`0x${res}`;
// Convert Hex to string
 String.fromCodePoint(resHex); // You can render this directly

Answer 3

简单的一行答案

function convertUnicode(unicode) {
    // split by +, use 2nd element and add \u infront with {}
    return `\u{${unicode.split("+")[1]}}`
}

Answer 4

<span dangerouslySetInnerHTML={{ __html: emo.htmlCode[0] }}></span>

Answer 5

切片从 API 获得的表情符号代码应该可以工作......

import React, { useEffect, useState } from "react";
import Sidebar from "../../Sidebar/Sidebar";
import "./Emoji.css";

const Emoji = ({ isAuth, setIsAuth }) => {
  const [type, setType] = useState([]);
  const getEmoji = () => {
    fetch("https://emojihub.herokuapp.com/api/all/group_animal_bird")
      .then((resp) => resp.json())
      .then((dat) => (console.log(dat), setType(dat)));
  };

  useEffect(() => {
    getEmoji();
    console.log(type);
  }, []);
  return (
    <>
              {type.map((emo) => (
                <>
                  <h6>{emo.name}</h6>
                  <span>{"\u{" + emo.unicode.slice(2) + "}"}</span> //This should work now.
                </>
              ))}
    
    </>
  );
};

export default Emoji;

你可以尝试一下。