ypSharing

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')
)
  1. 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'
    }
    
  2. 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')
    )
    
  3. 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的值
  1. 定义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 ? '❤️取消' : '

相关文章: