Question

我正在尝试使用其中的html标签呈现消息。如果将字符串作为prop传递，则渲染效果很好，但是当从变量传递该字符串时，显示文本已编码文本。

任何想法我如何在两种情况下都能正常工作？？

class Hello extends React.Component {
  render() {
    console.log(this.props.name)
    return <div>{this.props.name}</div>;
  }
}

ReactDOM.render(
  <Hello name="&lt;p&gt;How are you?&lt;/p&gt;" />,
  document.getElementById('container') --> **<p>How are you?</p>** 
);


class HelloOther extends React.Component {
  render() {
    const name = "&lt;p&gt;How are you?&lt;/p&gt;" 
    return <Hello name={name} />;
  }
}

ReactDOM.render(
  <HelloOther />,
  document.getElementById('container2') -- &lt;p&gt;How are you?&lt;/p&gt; -- > why?
);

小提琴链接-this post

Answer 1

class Hello extends React.Component {
  createMarkup() {
    return {__html: this.props.name};
  }
  render() {
    return <div dangerouslySetInnerHTML={this.createMarkup()} />;
  }
}

Answer 2

来自React Docs:

通常，通过代码设置HTML是有风险的，因为它很容易不经意间将您的用户暴露于跨站点脚本（XSS）攻击。因此，您可以直接从React设置HTML，但是您必须输入危险地设置SetInnerHTML并将带有__html键的对象传递给提醒自己这很危险。

除非您想使用dangerouslySetInnerHTML，否则可以使用正则表达式用html标签包装字符串。这样，您不必在字符串中传递html实体。您只需传递字符串，然后使用.replace()函数将字符串用html标记包裹即可。

由于您还希望将字符串解析为HTML，因此您可以将额外的属性传递给Hello组件，该组件然后用于用所需的html标签包装字符串，并呈现嵌套在字符串中的字符串。所需的html标签

function HTMLTag({ tag, children }) {
  return React.createElement(tag, null, children);
}

class Hello extends React.Component {
  render() {
    const { name, tag } = this.props;
    const str = name.replace(/(.+)/, `<${tag}>$1</${tag}>`);
    return ( 
        <div>
        <HTMLTag tag={tag}>{str}</HTMLTag>
        </div>
    );
  }
}

class HelloOther extends React.Component {
  render() {
    const name = "How are you?"; 
    return <Hello name={name} tag="h3" />;
  }
}

ReactDOM.render(
  <Hello name="How are you?" tag="p" />,
  document.getElementById('container')
);

ReactDOM.render(
  <HelloOther />,
  document.getElementById('container2')
);

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

<div id="container"></div>
<div id="container2"></div>

奇怪的html渲染问题与反应

2 个答案: