Props

基本使用

注意事项：

1. props 可以传递任意数据：字符串、数字、布尔值、数组、对象、函数、JSX
2. 遵循 单向数据流，子组件只能读取 props 中的数据，不能直接修改！

App.jsx

function App() {
  return (
    <>
      <Son
        name="小明"
        age={18}
        isTrue={true}
        list={[1, 2, 3]}
        obj={{ a: 1, b: 2 }}
        onFn={msg => {
          console.log(msg)
        }}
        el={<div>小明</div>}
      >
        <div>default</div>
      </Son>
    </>
  )
}

Son.jsx

function Son(props) {
  console.log(props)

  return <div onClick={() => props.onFn('son')}>子组件</div>
}

children

当把内容嵌套在子组件标签中时，父组件会自动在名为 children 的属性中传递进来。

App.jsx

function App() {
  return (
    <>
      <Son>
        <div>小明</div>
      </Son>
    </>
  )
}

Son.jsx

function Son(props) {
  return <div>{props.children}</div>
}

提示

类似于 vue 中的 slot 插槽。

prop-types

prop-types 是一个独立的 npm 包，并不是 React 自带的功能。为了减少 React 的核心库体积，React 团队在 React v15.5 之后将 PropTypes 分离出来，放到 prop-types 包中，因此需要单独安装并导入。

示例

import PropTypes from 'prop-types'

interface PropsType {
  name: string
  sex: string
  age: number
}

function Card(props: PropsType) {
  const { name, sex, age } = props
  return (
    <div>
      <p>姓名：{name}</p>
      <p>性别：{sex}</p>
      <p>年龄：{age}</p>
    </div>
  )
}

Card.propTypes = {
  name: PropTypes.string.isRequired,
  sex: PropTypes.string,
  age: PropTypes.number,
}

Card.defaultProps = {
  sex: '男',
  age: 18,
}

export default Card