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

留言

這個網誌中的熱門文章

cpe練習筆記 UVa401 Palindromes

[Arduino]電子秤平 重量感測條+HX711AD模組

cpe練習筆記 UVa10019 Funny Encryption Method