1、属性(props)
组件间传值,在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
我们知道使用组件的时候,可以嵌套。要在自定义组件的使用嵌套结构,就需要使用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> ) } }
2、状态(state)
将state与表单项中的value值绑定在一起,有state的值来控制表单元素的值,称为受控组件。
绑定步骤:
- 在state中添加一个状态,作为表单元素的value值
- 给表单元素绑定change事件,将表单元素的值设置为state的值
- 定义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 ? '❤️取消' : '