邢台市住房和城乡建设局网站,app运营成本估算,ppt链接网页怎么制作,百度推广登录入口官网我有一个React组件#xff0c;我想为其道具分配一个包含JavaScript变量和HTML实体的字符串。我尝试过的一些方法导致HTML实体被转义。例如#xff0c;从字面上呈现为 而不是 –。有没有办法让HTML实体在分配给React道具的JSX动态内容块中呈现为未转义…我有一个React组件我想为其道具分配一个包含JavaScript变量和HTML实体的字符串。我尝试过的一些方法导致HTML实体被转义。例如从字面上呈现为 而不是 –。有没有办法让HTML实体在分配给React道具的JSX动态内容块中呈现为未转义尝试了使用模板文字尝试 ... 问题在渲染的输出中的字面显示为 而不是 –。尝试构建一些不带引号的简单JSX问题这在编译时失败出现语法错误。通过将JSX包装在元素中来尝试解决语法错误{name} {description}} ... 问题可以但是我宁愿避免在渲染输出中出现多余的元素。尝试将HTML实体替换为Unicode数字字符引用问题这可行但是(我认为)使代码少了一点可读的。 (更明显的是 ndash而不是 2013代表一个破折号。)同样这涉及到-运算符的串联这会在我团队的JSLint检查器中触发Unexpected string concatenation prefer-template错误。使用字符串插值的解决方案会更好。的子元素上的dangerouslySetInnerHTML是否有效将其分配给变量然后使用它let temp_str $ {name} $ {description}Tony在title属性中使用。 T.J.Crowder我看到了title道具但是(也许是错误的)假设将呈现一些实际元素例如h1divp等。如果您用一个最小的可重现的示例演示问题来更新您的问题这将对人们有所帮助最好是使用Stack Snippets([]工具栏按钮)可运行的示例。堆栈片段支持React包括JSX这是怎么做的。Tony考虑到span起作用的事情您可能是对的。但是在prop中允许HTML然后使用dangerouslySetInnerHTML将会很危险。 :-D T.J。Crowder哦绝对可以Im AGAINS React在字符串变量中用–替换了因为当您希望按原样显示字符串时(例如显示用户评论)此功能需要对其进行预处理。这种替换仅适用于JSX(几乎是HTML)。您可以使用Fragment避免多余的span{name} {description}} ... 这个功能是在React 16.2中引入的。请参阅文档我同意samanime的观点使用实际字符最适合简单的情况但是如果您的内容真正是动态的我宁愿使用Fragment而不是entityToChar或dangerouslySetInnerHTML方法。以下是一些选项(我不久前在较笼统的答案中概述了这些选项)最简单-使用Unicode更安全-在Javascript字符串中为实体使用Unicode数字。要么不得已-使用dragonallySetInnerHTML插入原始HTML。title{${name} ${description}}与const MyPanel (props) {return ({props.title})}const MyPanelwithDangerousHTML (props) {return ()}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));这是React关于HTML实体的文档JSX陷阱其中最好使用实际字符而不是HTML实体如果由于HTML实体是动态的而不能这样做(这不仅仅是硬编码的破折号)则可以翻译该实体。这是一个可以执行此操作的小功能const entityToChar str {const textarea document.createElement(textarea);textarea.innerHTML str;return textarea.value;}然后您可以像这样使用它当然问题在于就像dangerouslySetInnerHTML一样这意味着组件很高兴地呈现通过道具接收到的HTML内容就像dangerouslySetInnerHTML一样这是危险的。 :-)它比dangerouslySetInnerHTML好一点因为它随后会以textarea值的形式返回这会剥离很多HTML。由于您可能不想在title道具中允许使用任意URL因此我很想为自己编写一个仅处理将字符实体转换为等效Unicode字符的函数。有点像 HTML-lite。 :-)实际上命名引用并不多和数字的很容易const named {ndash:–, // or\u2013mdash:—, // or\u2014nbsp: // 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 {convertCharEntities(this.props.title ||)};}}完整直播示例const named {ndash:–, // or\u2013mdash:—, // or\u2014nbsp: // 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 {convertCharEntities(this.props.title ||)};}}ReactDOM.render(,document.getElementById(root));请注意标签未作为标签输出但已处理实体。不知道的工作方式我只能推测您可以执行以下操作 ... MyPanel.jsrender() {const { title } this.props;return ;}
