javascript 如何从对象值中获取HTML标签？[重复]

tez616oj 于 2023-03-21 发布在 Java

关注(0)|答案(1)|浏览(103)

此问题在此处已有答案：

Insert HTML with React Variable Statements (JSX) [duplicate]（10个答案）
1年前关闭。
我正在创建一个react应用程序，并从一个对象获取数据。
我怎样才能使字符串在对象的身体阶段是正常工作。
物体是这样的

const info = [{
        "title": "More Information",
        "body": "<p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
        }]

我的react代码是这样的

const Page = ({ info }) => {
    return (
        <div>
           <div>{info.title}</div>
           <div>{info.body}</div>
        </div>
      )
    }

JavaScript

来源：https://stackoverflow.com/questions/67439872/how-to-get-html-tags-from-object-value

1条答案

按热度按时间

n9vozmp41#

默认情况下，React DOM在渲染之前会转义JSX中嵌入的任何值。因此，它可以确保您永远不会注入任何未显式写入应用程序的内容。所有内容在渲染之前都会转换为字符串。这有助于防止XSS（跨站脚本）攻击。Source

将`body`更新为JSX（如果可能）

注意：info是一个数组，它的第一个元素是一个具有title和body的对象，所以你不能直接访问这个对象。

const Foo = () => {
  const info = [
    {
      title: "More Information",
      body: <p><b>Hello World!!</b></p>,
    },
  ];

  return (
    <div>
      <div>{info[0].title}</div>
      <div>{info[0].body}</div>
    </div>
  );
};

ReactDOM.render(<Foo />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

如果不能将`body`改为JSX，可以使用`dangerouslySetInnerHTML`。

注意：使用此方法时要谨慎，如果需要，请清理html字符串。*

一个二个一个一个

赞(0）回复(0）举报 2023-03-21

我来回答

javascript 如何从对象值中获取HTML标签？[重复]

1条答案

将`body`更新为JSX（如果可能）

如果不能将`body`改为JSX，可以使用`dangerouslySetInnerHTML`。

相关问题

热门标签

最新问答

javascript 如何从对象值中获取HTML标签？[重复]

1条答案

将body更新为JSX（如果可能）

如果不能将body改为JSX，可以使用dangerouslySetInnerHTML。

相关问题

热门标签

最新问答

将`body`更新为JSX（如果可能）

如果不能将`body`改为JSX，可以使用`dangerouslySetInnerHTML`。