react父组件向子组件传值(props)

一、类组件属性

1.1 props

在react中父组件向子组件传递数据用props，在传递布尔值或者变量时，需要采用{}表达式。
创建props.js组件，创建Navbar.js组件。
props.js组件写入如下代码：

import React, { Component } from 'react'
import Navbar from './Navbar'

export default class Props extends Component {
    render() {
        return (
            <div>
                <div>
                    <h1>首页</h1>
                    <Navbar title="首页" show={true}/>
                </div>
                <div>
                    <h1>我的</h1>
                    <Navbar title="我的" show={false}/>
                </div>
                <div>
                    <h1>购物车</h1>
                    <Navbar title="购物车" show={true}/>
                </div>
            </div>
        )
    }
}

Navbar.js组件写入如下代码：

import React, { Component } from 'react'

export default class Navbar extends Component {
  render() {
      console.log(this.props)
      let {title, show} = this.props
    return (
      <div>
        Navbar-{title} 
        {show && <button>显示/隐藏</button>}
      </div>
    )
  }
}

效果：

可以看到值被接受，并且按照制定的显示或隐藏按钮了。

---

1.2 props验证

props验证需要先引入prop-types，这个不需要在单独安装了，如下引入：

在Navbar类中加入，静态属性，进行验证：

  // 类静态属性通过类名就能访问的到的
  static propTypes = {
    title: jtPropTypes.string,
    show: jtPropTypes.bool,
  }

我们故意将false写成字符串的：

验证报错了：

这其实就是我们想要的效果。

---

1.3 默认属性

我们如果想要给属性增加默认属性的话，按如下写法：

  // 类静态属性增加默认值
  static defaultProps = {
      show: true
  }

那我们将默认要显示的父组件的true删掉：

效果：

可以看到改隐藏的还是隐藏，该显示的还是显示。

---

1.4 props简写

如果刚好有个对象，里面的属性传给子组件的属性的key是一样的话，我们可以采用简写方式（有其他属性正常追加），如下场景：

效果：

---

二、函数组件属性

由于我们之前装了插件，输入rcc新建functionProps.js类组件。
输入rfc创建Sidebar.js函数组件。
Sidebar.js函数组件（子组件）：

import React from 'react'
import jtPropTypes from 'prop-types'

export default function SideBar(props) {
  console.log(props)
  let {bg} = props

  return (
    <div style={{background: bg, width: "150px"}}>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
  )
}

SideBar.propTypes = {
    bg: jtPropTypes.string
  }
SideBar.defaultProps = {
    bg: 'red'
}

可以看到函数式组件接收props采用形参。并且验证和默认都必须拿出来挂载。

---

functionProps.js类组件（父组件）：

import React, { Component } from 'react'
import Navbar from './Navbar'
import SideBar from './SideBar'


export default class FunctionProps extends Component {
  render() {
    return (
      <div>
          {/* 类组件 */}
          <Navbar title="类组件"></Navbar>

          {/* 函数式组件 */}
          <SideBar bg="yellow"></SideBar>
      </div>
    )
  }
}

效果：

三、属性 - 状态

3.1 相同点

都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）

3.2 不同点

1、属性能从父组件获取，状态不能
2、属性可以由父组件修改，状态不能
3、属性能在内部设置默认值，状态也可以，设置方式不一样
4、属性不在组件内部修改，状态要在组件内部修改
5、属性能设置子组件初始值，状态不可以
6、属性可以修改子组件的值，状态不可以

在学习React的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。