非DOM属性：1.dangerouslysetInnerHTML(xxs跨站攻击)
2.key
3.ref
编写组件嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
<!-- 定义子组件 -->
var GenderSelect= React.createClass({
render:function(){
return (
<!-- 父组件通过属性与子组件通信 -->
<select onChange={this.props.handleSelect}>
<option value="0">男</option>
<option value="1">女</option>
</select>
)
}
});
var SignupForm=React.createClass({
getInitialState:function(){
return {
name:'',
password:'',
gender:''
}
},
<!-- 子组件事件委托 -->
handleSelect:function(event){
this.setState({
gender:event.target.value
})
},
handChange:function(key,event){
var newState={}
newState[key]=event.target.value
this.setState(newState)
},
render: function(){
console.log(this.state)
return (
<form>
<input type="text" placeholder="说的什么吧" onChange={this.handChange.bind(this,'name')} />
<input type="password" onChange={this.handChange.bind(this,'password')} />
<GenderSelect handleSelect={this.handleSelect}></GenderSelect>
</form>
)
}
});
ReactDOM.render(
<SignupForm></SignupForm>,
document.getElementById('example')
);
</script>
</body>
</html>
编写简单的Mixin函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
<!-- Mixin=一组方法：1.横向抽离
2.面向切面编程，插件 -->
var BindingMixin = {
<!-- 多个函数作用相似的组件 参数key -->
changContent:function(key){
<!-- 作用域 -->
var _self=this
<!-- 函数闭包 -->
var newState={}
return function(event){
newState[key]=event.target.value
_self.setState(newState)
}
}
}
var HelloMessage=React.createClass({
<!-- 引用Mixin函数 -->
mixins:[BindingMixin],
getInitialState:function(){
return {
contentText:'',
password:''
}
},
render: function(){
return (
<form>
<input type="text" placeholder="说点什么吧" onChange={this.changContent('contentText')} />
<p>{this.state.contentText}</p>
<textarea onChange={this.changContent('password')} ></textarea>
<p>{this.state.password}</p>
</form>
)
}
});
<!-- 用于将模板转为HTML语言并插入指定的DOM节点 -->
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>
