1.關(guān)于空格
在HTML中，瀏覽器將元素間的多行空格渲染成一個(gè)空格，在JSX中則要指定渲染空格才會(huì)渲染，使用 {" "} 來渲染
return (
<div>
<a href="">Google</a>{" "}
<a href="">Facebook</a>
</div>
);
// 渲染出來的為Google和Facebook之間有一個(gè)空格
2.關(guān)于動(dòng)態(tài)渲染HTML
JSX內(nèi)置XSS攻擊保護(hù)，這樣默認(rèn)的禁止動(dòng)態(tài)的產(chǎn)生HTML標(biāo)簽，這一般情況都是好的，但是有時(shí)候也帶來不變，比如說渲染Markdown格式。
React提供 dangerouslySetInnerHTML 來跳過XSS保護(hù)，直接渲染，對(duì)于渲染marked,可以使用一個(gè) marked npm包來渲染
npm install --save marked
import marked from 'marked';
//...
<span dangerouslySetInnerHTML={{ __html=marked(this.props.descriptions) }} />
// 使用marked函數(shù)
// 設(shè)置去除XSS保護(hù)
3.關(guān)于內(nèi)聯(lián)樣式
React內(nèi)聯(lián)樣式多用于動(dòng)態(tài)的或者依據(jù)狀態(tài)的外觀，其他的css規(guī)則仍然分離出來。另外：
- 使用camel case 的表示方法
- 不必指定
px單位， React自動(dòng)添加
比如：
class Hello extends Component {
render() {
let myStyle = {
width: 100,
heigth: 50,
padding: 5em,
backgroundColor: '#eee'
}
return (
<div style={myStyle}>Hello world</div>
)
}
}
4.關(guān)于表單組件
表單組件分為： 可控組件 和 不可控組件。
Controlled Components
一個(gè)from組件如果有 value 或 checked 屬性則稱為可控組件。
特別情況：
1.textarea 標(biāo)簽
// 在html中，<textarea>的value為它的子節(jié)點(diǎn)
<textarea>hello world</textarea>
// 在JSX中，使用 value屬性
<textarea value="hello world" />
2.select 標(biāo)簽
// 在html中使用 'selected' 表示option被選中
<select>
<option selected>apple</option>
<option>pear</option>
</select>
// REACT用 'value'對(duì)應(yīng)的方式
<select value='A'>
<option value='A'>apple</option>
<option value='B'>pear</option>
</select>
不可控組件
在表單組件中，input元素沒有 value 屬性的組件稱之為uncontrolled component，如果想要設(shè)置一個(gè)不可控組件的初始值，使用 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
