react 基礎

一、render 函數 裏面只能用一個標籤

//正確
render () {
    return (<div>hello<div>)
}
//錯誤
render () {
    return (
        <div>hello<div>
        <div>world<div>
    )
}

二、state在組件在的定義、使用、以及改變

• 定義

//在constructor函數中定義
constructor ( props ) {
    super(props);
    this.state = {
        inputValue:"",
        list:[]
    }
}

• 使用

<input value = { this.state.inputValue} />

• 改變

<input value = { this.state.inputValue} onChange = {this.changeInput.bind(this)} />
//方法一
changeInput(e){
    this.setState({
        inputValue:e.target.value
    })
}
//方法二
changeInput(e){
    const value = e.target.value;//須要保存變量，不能在下面直接用e.target.value,或者會報錯
    this.setState(()=>({
        inputValue:value
    }))
}

三、註釋寫法

{/*註釋*/}
//或者
{
//註釋
}

四、css中的class與es6的class衝突，改用className來代替

五、laber標籤和input作關聯是所用的for 要用htmlFor來代替

六、父組件傳值給子組件

//父組件經過屬性的方式傳給子組件
//父組件
<todoList content = {item} />
//子組件接受則用props
//子組件
<div>{this.props.content}</div>

七、子組件像父組件傳參

//父組件經過屬性傳父組件的方法給子組件（注意：必須bind(this),不然子組件this指向有問題）
//父組件
<todoList delete = {this.delete.bind(this)} />
//子組件接受
delete(){
    this.props.delete();
}

八、PropTypes和defaultProps進行類型檢查

查考文檔 連接描述

//子組件
import PropTypes from 'prop-types';
class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

九、refs獲取dom

參考文檔 連接描述