typescript 如何在JSX REACT中使用Unicode进行数组Map?

dhxwm5r4  于 2023-02-13  发布在  TypeScript
关注(0)|答案(2)|浏览(148)
const data = ["1","2","3","4","5","6"] // example data
const unicode = • // This is the unicode that I want to put in the jsx
<div>
{
data.map((item)=>(
    item + <span>unicode</span>
))
}
</div>

但不起作用,它显示[object对象]
我尝试了(&bull;){"&bull;"}<span>&bull;</span><span>{"&bull;"}</span>
但都没用。
你知道我如何在JSX中Map数组时使用它的unicode元素吗?

hgb9j2n6

hgb9j2n61#

尝试使用8226代码而不是&bull;。我从https://www.toptal.com/designers/htmlarrows/punctuation/bullet/获得此代码
另外,您的JSX语法也不正确。

import React from "react";

function App() {
    const data = ["1","2","3","4","5","6"] // example data
    const unicode = 8226; // unicode equivalent to &bull;

  return (
    <div className="App">
        <div>
        {
            data.map((item)=>(
                <>{item} <span>{String.fromCharCode(unicode)}</span></>
            ))
        }
        </div>
    </div>
  );
}

export default App;

这是一个按预期工作的示例代码。

ugmeyewa

ugmeyewa2#

"Unicode"和 * 命名HTML字符实体 * 不是一回事。&bull;是Unicode码点U+2022的命名字符实体。要在JavaScript中编写Unicode码点(例如,在稍后要使用的字符串中),可以使用Unicode代码单元转义(\u2022)如果它适合一个单元(如果要手动编写代理项对,则为一对),或者为任何Unicode码位(\u{2022})指定Unicode码位**转义。
另外,JSX片段不是 * 字符串 *,您不能用+将它们连接起来。要将一系列片段编写在一起,您可以将它们 Package 在<React.Fragment>___</React.Fragment>中(更常见的缩写是:<>___</>)。
下面是一个将unicode设置为字符串的示例:

const data = ["1", "2", "3", "4", "5", "6"];
const unicode = "\u{2022}";
return (
    <div>
        {data.map((item) => (
            <>
                {item}<span>{unicode}</span>
            </>
        ))}
    </div>
);

x一个一个一个一个x一个一个二个x
下面是一个将unicode作为&bull;周围的片段的示例:

const data = ["1", "2", "3", "4", "5", "6"];
const unicode = <>&bull;</>;
return (
    <div>
        {data.map((item) => (
            <React.Fragment>
                {item}<span>{unicode}</span>
            </React.Fragment>
        ))}
    </div>
);
const Example = () => {
    const data = ["1", "2", "3", "4", "5", "6"];
    const unicode = <React.Fragment>&bull;</React.Fragment>;
    return (
        <div>
            {data.map((item) => (
                <React.Fragment>
                    {item}<span>{unicode}</span>
                </React.Fragment>
            ))}
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

注:上面的Stack Snippets使用React.Fragment的长格式,因为Stack Snippets中Babel的版本***太旧了***它不理解速记语法。SE Inc.多年来一直忽略的many problems with Stack Snippets之一。

相关问题