1.关于空格
在HTML中，浏览器将元素间的多行空格渲染成一个空格，在JSX中则要指定渲染空格才会渲染，使用 {" "} 来渲染
return (
<div>
<a href="">Google</a>{" "}
<a href="">Facebook</a>
</div>
);
// 渲染出来的为Google和Facebook之间有一个空格
2.关于动态渲染HTML
JSX内置XSS攻击保护，这样默认的禁止动态的产生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内联样式多用于动态的或者依据状态的外观，其他的css规则仍然分离出来。另外：
- 使用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为它的子节点
<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
