[React] example for use "dangerouslySetInnerHTML"
use dangerouslySetInnerHTML method with HTML element in React will allow your browser to explane HTML element,not just print it directly
focus on <div dangerouslySetInnerHTML={{ __html: this.props.context }} />
in child component
in parent component
focus on <div dangerouslySetInnerHTML={{ __html: this.props.context }} />
in child component
class infoCard extends Component {
render() {
return (
<div id="infoCard">
<div className="card-block">
<h1>{this.props.title}</h1>
<div className="card-block-text">
<p>
<div dangerouslySetInnerHTML={{ __html: this.props.context }} />
</p>
</div>
<div className="center">
<Button width="240px" fontSize="20px" type="1" label="重新登入"/>
</div>
</div>
</div>
);
}
}
in parent component
class ApplySuccess extends Component {
render() {
const context = '親愛的客戶,您好<br/>'
+'您已完成密碼重設申請,並將新密碼Email至您留存之電子信箱。<br/>'
+'為保護您的交易安全,請盡速至網站變更密碼。<br/>';
return (
<div id="login" className="container">
<Nav />
<div className="container-fluid">
<Card title="申請成功" context={context} />
</div>
<Footer/>
</div>
);
}
}
留言
張貼留言