1.關于空格

在HTML中，瀏覽器將元素間的多行空格渲染成一個空格，在JSX中則要指定渲染空格才會渲染，使用 {" "} 來渲染

return (
  <div>
    <a href="">Google</a>{" "}
    <a href="">Facebook</a>
  </div>
);

// 渲染出來的為Google和Facebook之間有一個空格

2.關于動態(tài)渲染HTML

JSX內置XSS攻擊保護，這樣默認的禁止動態(tài)的產生HTML標簽，這一般情況都是好的，但是有時候也帶來不變，比如說渲染Markdown格式。

React提供 dangerouslySetInnerHTML 來跳過XSS保護，直接渲染，對于渲染marked,可以使用一個 marked npm包來渲染

npm install --save marked

import marked from 'marked';

//...
<span dangerouslySetInnerHTML={{ __html=marked(this.props.descriptions) }} />
// 使用marked函數
// 設置去除XSS保護

3.關于內聯樣式

React內聯樣式多用于動態(tài)的或者依據狀態(tài)的外觀，其他的css規(guī)則仍然分離出來。另外：

• 使用camel case 的表示方法
• 不必指定 px 單位， React自動添加

比如：

class Hello extends Component {
  render() {
    let myStyle = {
      width: 100,
      heigth: 50,
      padding: 5em,
      backgroundColor: '#eee'
    }

    return (
      <div style={myStyle}>Hello world</div>
    )
  }
}

4.關于表單組件

表單組件分為： 可控組件 和 不可控組件。

Controlled Components

一個from組件如果有 value 或 checked 屬性則稱為可控組件。

特別情況：

1.textarea 標簽

// 在html中，<textarea>的value為它的子節(jié)點
<textarea>hello world</textarea>

// 在JSX中，使用 value屬性
<textarea value="hello world" />

2.select 標簽

// 在html中使用 'selected' 表示option被選中
<select>
  <option selected>apple</option>
  <option>pear</option>
</select>

// REACT用 'value'對應的方式
<select value='A'>
  <option value='A'>apple</option>
  <option value='B'>pear</option>
</select>

不可控組件

在表單組件中，input元素沒有 value 屬性的組件稱之為uncontrolled component，如果想要設置一個不可控組件的初始值，使用 defaultValue, 而不是 value， 可以使用 onSubmit事件來處理非可控表單組件

handleSubmit(e) {
  console.log('Submitted values are:',
    e.target.name.value,
    e.target.email.value
  );
  e.preventDefault();
}

render() {
  return (
    <form onSubmit={this.handleSubmit.bind(this)}>
      <div className="formGroup">
        Name: <input name="name" type="text" />
      </div>
      <div className="formGroup">
        E-mail: <input name="email" type="email" />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

2016/11/30 22:32:55