反应 |在jsx中渲染html标签答案

【问题标题】：React | render html tag in jsx反应 |在jsx中渲染html标签
【发布时间】：2020-06-23 12:46:27
【问题描述】：

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

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

演示： CodeSandbox Link

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

根据the Doc：

Tip 应该是 string ，使用 \n 换行并将 whiteSpace: "break-spaces 添加到 Spin 的样式中：

<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>

【讨论】：

【解决方案2】：

你可以这样试试：

<Spin tip={<span><br />"Loading..."</span>}>

【讨论】：

【解决方案3】：

您可以尝试在字符串中添加“\n”

【讨论】：

【解决方案4】：

你应该把所有的东西都放在一个不带引号和连接的 jsx 标签中，像这样：

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

【讨论】：

【解决方案5】：

可能类似于<Spin tip={[<br />, "Loading..."]}>。

【讨论】：

【解决方案6】：

ant design spin prop 的 Spin 组件内不能发送 HTML 标签。

它总是认为它是一个字符串，不会渲染 HTML。

我认为这有助于防止不必要的代码进入我们的应用程序。

【讨论】：