反应|在jsx中呈现html标签

时间:2020-03-11 13:51:22

标签: javascript html reactjs

如何在React中呈现字符串以及html标签。我只想在10秒内将重定向添加到下一行,但是却获得了[object object]。

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

enter image description here 演示: CodeSandbox Link

6 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

您可以尝试这样:

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

您应将所有内容都放在jsx标记中,且不要使用引号和串联,例如:

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

答案 4 :(得分:0)

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

答案 5 :(得分:0)

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

它将始终将其视为字符串,并且不会呈现HTML。

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