【React】JSX 與 Html 標籤屬性



<script type="text/babel">

 function App() {

 const htmlTemplate = { __html :'<div>這裡有一段文字</div>'}

 return (

 <div>

 {/* 使用 dangerouslySetInnerHTML 顯示html */}

 <div dangerouslySetInnerHTML={htmlTemplate}></div>

 {/* class => className */}

 <div><button type="button" className="btn btn-primary">Primary</button></div>

 {/* checked => defaultChecked 與 結尾標籤 */}

 <div><input type="checkbox" defaultChecked /></div>

 {/* value => defaultValue */}

 <div><input type="text" defaultValue="卡斯伯" /></div>

 {/* for => htmlFor */}

 <div>

 <label htmlFor="email">請輸入 Email</label>

 <input type="email" id="email" />

 </div>

 {/* selected => defaultValue */}

 <div>

 <select name="" id="" defaultValue="2">

 <option value="1">1</option>

 <option value="2">2</option>

 <option value="3">3</option>

 </select>

 </div>

 { /* textarea 文字 要使用 defaultValue*/ }

 <div>

 <textarea name="" id="" cols="30" rows="5" defaultValue="這裡可以放多行文字"></textarea>

 </div>

 {/* onChange */}

 <div><input type="text" onChange={

 function(event){

 console.log(event.target.value);

 }

 } /></div>

 </div>

 );

 }

 const el = document.getElementById('root');

 const root = ReactDOM.createRoot(el);

 root.render(<App />);