How do render string along with html tag in react. I just want to add redirecting in 10 seconds to next line but I'm getting [object object] instead.
tip={"Please wait!" +<br/ >+"Redirecing in 10 seconds..."}
DEMO: CodeSandbox Link
According to the Doc :
Tip
should be a string
, use \\n
for line breaks and add whiteSpace: "break-spaces
to the style of the 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>
你可以这样尝试:
<Spin tip={<span><br />"Loading..."</span>}>
您可以尝试将 "\\n" 添加到字符串中
您应该将所有内容都放在 jsx 标签中,不要使用引号和连接,如下所示:
tip={<span>Please wait!<br/ >Redirecing in 10 seconds...</span>}
它可能类似于<Spin tip={[<br />, "Loading..."]}>
。
You can not send HTML tags inside Spin component of ant design spin prop.
It will always consider it a string and will not render the HTML.
I think this helps to prevent unnecessary code into our app.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.