Javascript React props：在JSX动态内容中使用HTML实体？

我有一个，我想给它分配一个包含JavaScript变量和HTML实体的字符串

我尝试的一些方法导致HTML实体被转义。例如，

&ndash按字面意思呈现为“
&ndash；
”而不是“
–
”

有没有办法让HTML实体在分配给React props的JSX动态内容块中呈现unscaped

尝试
尝试使用：

问题：此操作在编译时失败，出现语法错误


尝试通过将JSX包装在
元素中来解决语法错误：

<MyPanel title={<span>{name} &ndash; {description}</span>} ... </MyPanel>

以下是React关于HTML实体的文档：

其中，最好使用实际字符而不是HTML实体：

<MyPanel title={ `${name} – ${description}` } />

然后您可以这样使用它：

<MyPanel title={ entityToChar(`${name} &ndash; ${description}`) } />

在不知道
如何工作的情况下，我只能推测您可以执行以下操作：

<MyPanel title={`${name} &ndash; ${description}`}> ... </MyPanel>

。。。

MyPanel.js

render() {
    const { title } = this.props;

    return <div dangerouslySetInnerHTML={{ __html: title }} />;
}

render（）{
const{title}=this.props；
返回；
}
您可以使用
片段来避免多余的
span
：

<MyPanel title={<>{name} &ndash; {description}</>} ... </MyPanel>

由于您可能不希望在
标题
道具中允许任意URL，我很想自己编写一个函数，该函数只处理将字符实体转换为其Unicode等效字符的操作。有点像“HTML精简版”。：-）其实没有那么多；数字型的很简单：

const named = {
  "ndash": "–", // or "\u2013"
  "mdash": "—", // or "\u2014"
  "nbsp": " "   // or "\u00A0"
  // ...
};
// Obviously this is a SKETCH, not production code!
function convertCharEntities(str) {
  return str.replace(/&([^ ;&]+);/g, (_, ref) => {
    let ch;
    if (ref[0] === "#") {
      let num;
      if (ref[0].toLowerCase() === "x") {
        num = parseInt(ref.substring(2), 16);
      } else {
        num = parseInt(ref, 10);
      }
      ch = String.fromCodePoint(num);
    } else {
      ch = named[ref.toLowerCase()];
    }
    return ch || "";
  });
}

然后在渲染该道具时使用它：

class Example extends React.Component {
  render() {
    return <div>{convertCharEntities(this.props.title || "")}</div>;
  }
}

类示例扩展了React.Component{
render（）{
返回{convertCharEntities（this.props.title | | |“”）}；
}
}

完整的现场示例：


命名常量={
“ndash”：“–”、//或“\u2013”
“mdash”：“-”、//或“\u2014”
nbsp:“//或”\u00A0”
// ...
};
//显然，这是一个草图，而不是生产代码！
函数实体（str）{
返回str.replace（/&（[^；&]+）；/g，（u，ref）=>{
让我们一起去吧；
如果（参考[0]==“#”）{
让num；
如果（参考[0]。toLowerCase（）=“x”）{
num=parseInt（参考子字符串（2），16）；
}否则{
num=parseInt（参考文献10）；
}
ch=字符串。从代码点（num）；
}否则{
ch=命名的[ref.toLowerCase（）]；
}
返回ch | |“”；
});
}
类示例扩展了React.Component{
render（）{
返回{convertCharEntities（this.props.title | | |“”）}；
}
}
ReactDOM.render(
,
document.getElementById（“根”）
);

以下是一些选项（我在不久前概述了这些选项）：

最容易使用的Unicode

<MyPanel title={ `${name} – ${description}` } />

与：




constmypanel=（道具）=>{
返回(
{props.title}
)
}
const MyPanelwithDangerousHTML=（道具）=>{
返回(
)
}
var description=“description”；
var name=“name”；
ReactDOM.render(
，document.getElementById（“option1”）；
ReactDOM.render(
，document.getElementById（“option2”）；
ReactDOM.render(
，document.getElementById（“option3”）；
ReactDOM.render(
，document.getElementById（“option4”）

对
的子元素的
危险的HTML
是否有效？将其分配给变量，然后使用它：
让temp_str=
${name}&ndash${description}`@Tony:它被用在
title
属性中。@Tony:考虑到
span
已经成功了，你可能是对的。允许在道具中使用HTML，然后使用
危险的HTML
，这将是……危险的-D@T.J.Crowder哦，绝对是！当然，问题是，就像
dangerouslysetinerhtml
，这意味着组件通过道具愉快地呈现它接收到的HTML内容，就像
dangerouslysetinerhtml
，这是……危险的。：-）它比
危险的setinenerHTML
要好一点，因为它会作为
textarea
值返回，这会去除很多HTML。
<MyPanel title={<>{name} &ndash; {description}</>} ... </MyPanel>

const named = {
  "ndash": "–", // or "\u2013"
  "mdash": "—", // or "\u2014"
  "nbsp": " "   // or "\u00A0"
  // ...
};
// Obviously this is a SKETCH, not production code!
function convertCharEntities(str) {
  return str.replace(/&([^ ;&]+);/g, (_, ref) => {
    let ch;
    if (ref[0] === "#") {
      let num;
      if (ref[0].toLowerCase() === "x") {
        num = parseInt(ref.substring(2), 16);
      } else {
        num = parseInt(ref, 10);
      }
      ch = String.fromCodePoint(num);
    } else {
      ch = named[ref.toLowerCase()];
    }
    return ch || "";
  });
}

class Example extends React.Component {
  render() {
    return <div>{convertCharEntities(this.props.title || "")}</div>;
  }
}

<MyPanel title={ `${name} – ${description}` } />

<MyPanel title={`${name} \u2013 ${description}`} />

<MyPanel title={`${name} ${String.fromCharCode(8211)} ${description}`} />

title={`${name} &ndash; ${description}`}

<div dangerouslySetInnerHTML={{__html: props.title}}></div>