Props

Props 介绍

Props 是 React 用来在组件之间互相通信的属性。通常 props 都是父组件提供给它的子组件，从而可以传递一些信息，信息内容可以是任何 JavaScript 对象，包括基本类型、对象、函数、组件。

Props 有点类似于 HTML 的属性，比如：

// 定义一个组件, 有几个Props
// name, attr1, children
function Comp({ name, attr1, children }) {
    return (
        <div name={name}>{children}</div>
    )
}
// Props 的使用
<Comp name="comp-name" attr1="test">
    <h1>This is a child node</h1>
</Comp>

Props 使用

1. Props 传递/读取

属性传递是从父组件到子组件，例如：

function ParentComp() {
    return (
        <div>
            <!-- 父组件传递 data 属性到子组件 ChildComp -->
            <ChildComp data={123} />
        </div>
    )
}
// 子组件读取 data 属性
function ChildComp({ data }) {
    return (
        <div>
            data: {data}
        </div>
    )
}

2. 传递/读取的一些小技巧

// 解构传递
function ParentComp() {
    const data = { name: 'ABC', attr1: 1, attr2: 2 };
    return (
        <div>
            <!-- 父组件传递 data 属性到子组件 ChildComp -->
            <ChildComp {...data} />
        </div>
    )
}
// 解构接收
function ChildComp({ name, ...rest }) {
    return (
        <div>
            name: {name},
            attr1: {rest.attr1}
            attr2: {rest.attr2}
        </div>
    )
}

Props 类型检查

Props 支持类型检查，主要使用 prop-types 库来指定属性类型检查相关属性，包括类型、必填、自定义校验等。 定义方式如下：

import PropTypes from 'prop-types';

function Comp({ name, attr1, children }) {
    return (
        <div name={name}>{children}</div>
    )
}

Comp.propTypes = {
    name: PropTypes.string,
    children: PropTypes.element.isRequired
}

如果是使用 TypeScript 那么天然就知道类型检查，所以，也就用不上这种定义方式。

Props 默认属性

默认属性，通过 defaultProps 来定义，在没有传入任何属性的时候，这个将作为默认的 Props

Comp.defaultProps = {
    name: 'ABC',
    children: <span />
}

Props Children属性

children 属性比较特殊，传入的方式并不是通过JSX的属性方式传递，而是通过子组件的形式传入，比如：

function ParentComp() {
    return (
        <Comp name={'ABC'}>
            <div>Child Node</div>
        </Comp>
    )
}

function Comp({ children }) {
    return (
        <div>
            {children}
        </div>
    )
}
// children = <div>Child Node</div>

Tips

不要尝试 “更改props”，没用，如果需要交互，请用state来代替。