[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> ); } }
留言
張貼留言