【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 />);