组件:组件是React的核心、精髓,组件的名字首字母要大写
1. 状态组件(类组件)
class One extends React.Component{
render(){
return (
<div>我是一个状态组件</div>
)
}
}
export default One;
注意:
* 状态组件是通过class来定义的,需要继承 React.Component 类
* render 方法返回的内容即是该组件的内容
* 类的名字即是组件的名字
* 属性是不允许被修改的,状态是可以修改的
* 状态:只有在状态组件当中才存在,它是允许被修改的,状态是从父级继承过来的
2. 无状态组件(函数组件)
function One() {
return (
<div>One</div>
)
}
export default One;
注意:
* 函数的名字即是组件的名字,函数的返回值即是组件的内容
* 返回的内容有且只能有一个根元素。
* 必须要有return
3. 受控组件
注意:
* 下拉列表,文本框,单选,多选。如果该元素当中使用 value 属性,那么需要在该元素上增加 onChange 事件。
* 该组件会受到state的控制,如果要想改变文本的框的内容,需要通过 onChange 事件来改变 state
* defaultValue 初始值
class MyForm extends React.Component{
constructor(){
super();
this.state = {
userName:"",
passWord:""
}
}
changeHandler(e){
this.setState({
[e.target.name]:e.target.value
})
}
render(){
return (
<div>
<input type="text" name="userName" onChange={this.changeHandler.bind(this)} value={this.state.userName}/>
<input type="text" name="passWord" onChange={this.changeHandler.bind(this)} value={this.state.passWord}/>
<input type="button" value="提交"/>
</div>
)
}
}
ReactDOM.render((<MyForm></MyForm>),document.querySelector("#root"))
4. 非受控组件
class My extends React.Component{
constructor(){
super();
this.state = { userName:"" }
}
render(){
return (
<div>
<div ref="myDiv">我会变成红色</div>
<input type="text" defaultValue={this.state.userName} ref="userName"/>
<input type="button" value="提交" onClick={()=>{
this.refs.myDiv.style.color="red";
}}/>
</div>
)
}
}
ReactDOM.render((<My/>),document.querySelector("#root"))