React组件三大核心属性

Props

用于组件接收参数

参数传递

 const valData={name:"章三", age:"20", sex:"男"}
 ReactDOM.render(<MyComponent {...valData}/>, document.getElementById("test"));

接收参数 this.props

从组件实例对象this里面获取组件传递过来的参数

render(){ 
                let {name,age,sex} =this.props 
                return (
                    <div>
                        <ul><li>姓名：{name}</li>
                            <li>年龄：{age}</li>
                            <li>性别：{sex}</li>
                        </ul>
                    </div>
                ) 
             }

props类型限制

• 指定参数类型 PropTypes

// 数据类型小写
 static  propTypes={
        name:PropTypes.string.isRequired,//限制name必传 且为字符串
        speak:PropTypes.func,//限制speak为函数
 }  

• 指定参数默认值 defaultProps

static defaultProps={
           sex:"男",
           age:18
}

Ref

获取绑定元素里面的属性值

ref定义的三种方式

• 字符串定义 (官方不推荐使用---存在一些效率问题)

直接this.refs.input1.value获取输入框的值

  <input ref="input1" type="text"  />
  

• 回调函数定义方式

🍧 每一次页面数据更新的时候都会被调用(问题可忽略)

直接this.input1.value获取输入框的值

   <input ref={input=>this.input1=input} type="text"  />

• createRef(官方推荐使用方式)

先定义一个createRef

 myRef=React.createRef()
 

调用方式

<input ref={this.myRef} type="text"  />

获取输入框的值 this.myRef.current.value

  showAlert=()=>{
        let {value}=this.myRef.current
        alert(value)

    }