[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

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>
        );
    }
}

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料