React 组件三大核心之 props

在React中，props（属性）是组件之间传递数据的一种方式。

props是只读的，这意味着你不能在子组件中修改它们。

props可以是任何类型的数据，如字符串、数字、数组、对象或者函数。

传递props

可以将props从父组件传递给子组件。在JSX中，将属性添加到子组件的标签上，就像HTML中的属性一样。

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <div>
    	<ChildComponent message="Hello from ParentComponent!" />
    </div>
  );
}

export default ParentComponent;

接收props

在子组件中，可以通过props对象访问传递给它的数据。

函数式组件：

// 子组件
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <p>{props.message}</p>
    </div>
  );
}

export default ChildComponent;

类组件中：

import React, { Component } from 'react';

class ChildComponent extends Component {
  render() {
    return (
	    <div>
	      <p>{this.props.message}</p>
	    </div>
    );
  }
}

export default ChildComponent;

.

默认props

可以为组件定义默认的props值，以防止在使用组件时没有传递相应的props。

函数式组件：

import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <p>{props.message}</p>
    </div>
  );
}

ChildComponent.defaultProps = {
  message: 'Default message'
};

export default ChildComponent;

类组件中：

import React, { Component } from 'react';

class ChildComponent extends Component {

	// 为组件设置默认的props
    static defaultProps = {
        message: 'Default message'
    };

    render () {
        return (
            <div>
                <p>{this.props.message}</p>
            </div>
        );
    }
}

export default ChildComponent;

.

验证props

可以使用propTypes对象来验证传递给组件的props类型。这有助于在开发过程中捕获潜在的错误。

函数式组件：

import React from 'react';
import PropTypes from 'prop-types';

function ChildComponent(props) {
  return (
    <div>
      <p>{props.message}</p>
      <p>{props.age}</p>
    </div>
  );
}

ChildComponent.propTypes = {
	message: PropTypes.string.isRequired, // message必须为字符串且必传
	age: PropTypes.number // age必须为数值
};

export default ChildComponent;

类组件中：

注意区别 propTypes 和 PropTypes

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class ChildComponent extends Component {

	// 为组件设置默认的props
    static propTypes = {
		message: PropTypes.string.isRequired, // message必须为字符串且必传
		age: PropTypes.number // age必须为数值
	};

    render () {
        return (
		    <div>
		      <p>{props.message}</p>
		      <p>{props.age}</p>
		    </div>
        );
    }
}

export default ChildComponent;

.

解构props

在子组件中，你可以使用ES6解构语法来简化对props的访问。

import React from 'react';

function ChildComponent({ message }) {
  return (
    <div>
      <p>{message}</p>
    </div>
  );
}

export default ChildComponent;