无法在反应 jsx 值道具中重复十六进制 html 实体

Posted 2023-02-21

【中文标题】无法在反应 jsx 值道具中重复十六进制 html 实体

【英文标题】：can't repeat an hexadecimal html entity in react jsx value props

【发布时间】：2018-03-25 10:47:57

【问题描述】：

所以我的问题是为什么这会起作用并显示点：

<Field label="Password" value="&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;" type="password" />

上面只显示普通的十六进制代码！

<Field label="Password" value=`$'&#x2022;'.repeat(10)` type="password" />

我的字段组件：

function renderValueByType(value: string, type: string) 
  switch (type) 
    case 'phone':
      return phoneFormatter(value);

    default:
      return value;
  


/**
 * 
 * @param * param0 
 */
const Field = ( label, value, type, className : PropTypes) => (
  <div className=className>
    <span className="Field__label">label</span>
    <span className="Field__content">renderValueByType(value, type)</span>
  </div>
);

【问题讨论】：

有趣的问题。我不知道为什么，但是您可以尝试将 $'•'.repeat(10) 分配给变量并将其用作值吗？我想知道它会如何表现。

使用变量函数返回或其他任何结果的相同结果...

Field 组件来自哪个库？

更新了我的问题

这两个选项编译成什么？

【参考方案1】：

如果您将静态字符串设置为道具，它将按原样呈现。

如果您将变量设置为道具，它将被清理。

您最好的选择是将您的十六进制字符代码转换为字符串，然后再将其传递给您的组件（使用String.fromCharCode()）：

<Field
   label="Password"
   value=String.fromCharCode("0x2022").repeat(10)
   type="password"
/>

【讨论】：

这里其实不需要模板字面量。 value=String.fromCharCode("0x2022").repeat(10) 工作原理相同。