React-03属性

属性基本使用

import React, { Component } from 'react'
import NaviBar from './navbar/NaviBar'

export default class PropsTest extends Component {


  render() {
    return (
      <div>
        <div>
          <h2>首页</h2>
          <NaviBar title="首页" leftShow={false}></NaviBar>
        </div>

        <div>
          <h2>列表</h2>
          <NaviBar title="列表" leftShow={true}></NaviBar>
        </div>
        <div>
          <h2>购物车</h2>
          <NaviBar title="购物车" leftShow={true}></NaviBar>
        </div>

      </div>
    )
  }
}

import React, { Component } from 'react'

export default class NaviBar extends Component {

  state = {
    //只能自己内部使用，不能给外部用
  }

  render() {
    //属性通过接收属性
    let {title, leftShow} = this.props
    return (
      //
      <div>
        {/* 条件渲染的另一种写法 */}
        {leftShow && <button>返回</button>}
        
        NaviBar-{title}
        <button>首页</button>
      </div>
    )
  }
}

属性验证

import React, { Component } from 'react'
import typecheck from 'prop-types'
export default class NaviBar extends Component {


  state = {
    //只能自己内部使用，不能给外部用
  }

  static propTypes = {
    leftShow:typecheck.bool
  }

  render() {
    //属性通过接收属性
    let {title, leftShow} = this.props
    return (
      //
      <div>
        {/* 条件渲染的另一种写法 */}
        {leftShow && <button>返回</button>}
        
        NaviBar-{title}
        <button>首页</button>
      </div>
    )
  }
}

默认属性

属性指定默认值，没接收值就还是默认值，接收了值就覆盖

//默认属性
NaviBar.defaultProps = {
  leftShow: true
}

属性VS状态

相似点，都是纯JS对象，都会触发render更新，都具有确定性

不同点：

1、属性能从父组件获取，状态不能

2、属性可以由父组件修改，状态不能

3、属性能在内部设置默认值，状态也可以，设置方式不一样

4、属性不在组件内部修改，状态要在组件内部修改

5、属性能设置子组件初始值，状态不可以

6、属性可以修改子组件的值，状态不可以

非受控

import React, { Component } from 'react'

  

export default class UnControl extends Component {

//创建ref

myusername = React.createRef()

  

render() {

return (

<div>

<h1>登录页</h1>

<input type="text" ref={this.myusername} defaultValue="Gfred"/>

<button onClick={() => {

console.log(this.myusername.current.value);

}}>登录</button>

<button onClick={() => {

this.myusername.current.value = ""

}}>重置</button>

</div>

)

}

}

受控

import React, { Component } from 'react'

  

export default class Control extends Component {

state = {

username: 'Gfred'

}

  

render() {

return (

<div>

<h1>登录页</h1>

<input type="text" value={this.state.username} onChange={(e) => {

console.log(e.target.value);

this.setState({

username: e.target.value

})

}}/>

<button onClick={() => {

}}>登录</button>

<button onClick={() => {

this.setState({

username: ''

})

}}>重置</button>

</div>

)

}

}