组件间传值,在React中是通过只读属性 props 来完成数据传递的。
props:接受任意的入参,并返回用于描述页面展示内容的 React 元素。
import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'
class Title extends Component {
render () {
return (
<h1>欢迎进入{this.props.name}的世界</h1>
)
}
}
const Content = (props) => {
return (
<p>{props.name}是一个构建UI的库</p>
)
}
class App extends Component {
render () {
return (
<Fragment>
<Title name="React" />
<Content name="React.js" />
</Fragment>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
props默认值
由于设置了defaultProps, 不传props也能正常运行,如果传递了就会覆盖defaultProps的值
类组件
import React,{Component,Fragment} from 'react'
import ReactDOM from 'react-dom'
class Title extends Component{
static defaultProps={
name:'zh'
}
render(){
return(
<h1>{{this.props.name}}</h1>
)
}
}
const Content =(props)=>{
return (
<p>{{props.name}}</p>
)
}
Content.defaultProps={
name:'fasgd'
}
props.children
。在实际的工作当中,我们几乎每天都需要用这种方式来编写组件。import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'
class Title extends Component {
render () {
return (
<h1>欢迎进入{this.props.children}的世界</h1>
)
}
}
const Content = (props) => {
return (
<p>{props.children}</p>
)
}
class App extends Component {
render () {
return (
<Fragment>
<Title>React</Title>
<Content><i>React.js</i>是一个构建UI的库</Content>
</Fragment>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
prop-types检查props
React其实是为了构建大型应用程序而生, 在一个大型应用中,根本不知道别人使用你写的组件的时候会传入什么样的参数,有可能会造成应用程序运行不了,但是不报错。为了解决这个问题,React提供了一种机制,让写组件的人可以给组件的props
设定参数检查,需要安装和使用prop-types:
npm i prop-types -S
类型: array、bool、func、number、object、string
React元素类型:element
必填项:isRequired
特定结构的对象: shape({})
函数组件
import PropTypes from 'prop-types'
const Content=(props)=>{
let {a,b}=props
return (
<div>{a}{b}</div>
)
}
Content.propTypes={
a:PropTypes.number,
b:PropTypes.number
}
import PropTypes from 'prop-types'
class Conetnt extends Component{
static propTypes={
a:PropTypes.number,
b:PropTypes.number
}
render(){
let {a,b}=this.props
return(
<div>
</div>
)
}
}
将state与表单项中的value值绑定在一起,有state的值来控制表单元素的值,称为受控组件。
绑定步骤:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
state = {
name: 'React',
isLiked: false
}
render () {
return (
<div>
<h1>欢迎来到{this.state.name}的世界</h1>
<button>
{
this.state.isLiked ? '❤️取消' : '🖤收藏'
}
</button>
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
方式二(推荐):
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
constructor() {
super()
this.state = {
name: 'React',
isLiked: false
}
}
render () {
return (
<div>
<h1>欢迎来到{this.state.name}的世界</h1>
<button>
{
this.state.isLiked ? '❤️取消' : '🖤收藏'
}
</button>
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
setstatethis.props
和this.state
是纯js对象,在vue中,data属性是利用Object.defineProperty
处理过的,更改data的数据的时候会触发数据的getter
和setter
,但是React中没有做这样的处理,如果直接更改的话,react是无法得知的,所以,需要使用特殊的更改状态的方法setState
。
第一个参数可以是对象
可以是方法return一个对象,我们把这个参数叫做updater
参数是对象
this.setState({
isLiked: !this.state.isLiked
})
this.setState((prevState, props) => {
return {
isLiked: !prevState.isLiked
}
})
setState
是异步的,所以想要获取到最新的state,没有办法获取,就有了第二个参数,这是一个可选的回调函数
this.setState((prevState, props) => {
return {
isLiked: !prevState.isLiked
}
}, () => {
console.log('回调里的',this.state.isLiked)
})
console.log('setState外部的',this.state.isLiked)
不同点:
属性能从父组件获取,状态不能
属性可以由父组件修改,状态不能
属性能在内部设置默认值,状态也可以
属性不在组件内部修改,状态要改
属性能设置子组件初始值,状态不可以
属性可以修改子组件的值,状态不可以
state
this.setState
方法进行更新,setState
会导致组件的重新渲染。props
props
,否则组件的 props
永远保持不变注意:尽量少地用 state
,多用 props
。
如果有多个组件共享一个数据,把这个数据放到共同的父级组件中来管理。
将state与表单项中的value值绑定在一起,state的值来控制表单元素的值,称为受控组件。
步骤:
<input type="text" value={this.state.username} onChange={this.inputChange.bind(this)} />
注:多表单元素需优化事件方法
this.setState({
[e.target.name]: e.target.value
})
没有和state数据源进行关联的表单项,而是 借助ref,使用元素DOM方式获取表单元素值
步骤:
import React {Component} from 'react' //1
export default class User extends Component {
constructor(props){
super(props)
<!-- 定义一个引用 -->
this.username=React.createRef() //2
}
render(){
return{
<div>
<input type='text' ref={this.username}/>//3
<button onClick={this.addUser.bind(this)}></button>
</div>
}
}
addUser(){
console.lof(this.username.current.value)//4
}
}
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://www.cnblogs.com/ypSharing/p/15393918.html
内容来源于网络,如有侵权,请联系作者删除!