javascript - react |在jsx中渲染html标签

标签 javascript html reactjs

如何在 React 中渲染字符串和 html 标签。我只想在 10 秒内将重定向添加到下一行,但我得到的是 [object object]。

tip={"Please wait!" +<br/ >+"Redirecing in 10 seconds..."}

enter image description here 演示: CodeSandbox Link

最佳答案

根据the Doc :

Tip 应为 string ,使用 \n 进行换行并添加 whiteSpace: "break-spacesSpin 的样式:

<Spin tip={"Please wait! \n Redirecing in 10 seconds..."} style={{ whiteSpace: "break-spaces"}}>

ReactDOM.render(
  <antd.Spin tip={"Please wait! \n Redirecing in 10 seconds..."} style={{ whiteSpace: "break-spaces"}}>
    <antd.Alert
      message="Alert message title"
      description="Further details about the context of this alert."
      type="info"
    />
  </antd.Spin>,
  document.getElementById("container")
);
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.0.2/antd.min.css" />
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.0.2/antd.min.js"></script>
<div id="container"></div>

关于javascript - react |在jsx中渲染html标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60637643/

相关文章:

javascript - 旋转木马幻灯片(未滑动)事件的火灾事件,Bootstrap 3

html - 打开我的网页时不会加载外部 css 文件

javascript - 字母数字和数字字符串排序未按预期工作

javascript - 使用 HighCharts 动态更新同一图表上的两个系列

javascript - 寻找最小成本组合算法

javascript - 使用 JS linter/formatter 将条件(else/if)运算符转换为逻辑运算符(&& ||)?

html - 删除 Outlook 365 中 HTML 邮件正文中表格前后的换行符

javascript - 如何使错误消息更快消失

javascript - onFocus 干扰 onClick

css - fixed-data-table-2 悬停行背景色