React Props

在 React 中，props 是用于传递数据给组件的一种机制。props 是只读的，意味着它们不能在组件内部被修改。组件接收 props 作为参数，并根据这些 props 渲染 UI。

传递 Props

要向组件传递 props，可以在组件的声明中使用 JSX 语法，将 props 作为组件的属性进行传递。例如：

// www.javascriptcn.com code example
// 父组件
function ParentComponent() {
  return <ChildComponent name="Alice" age={30} />;
}

// 子组件
function ChildComponent(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

在上面的示例中，父组件 ParentComponent 将 name 和 age 作为 props 传递给子组件 ChildComponent。

默认 Props

可以为组件设置默认的 props 值，以防未传递相应的 props。可以使用 defaultProps 属性来设置默认 props。例如：

// www.javascriptcn.com code example
function ChildComponent(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

ChildComponent.defaultProps = {
  name: 'Bob',
  age: 25
};

在上面的示例中，如果父组件未传递 name 或 age props，则子组件会使用默认值。

PropTypes

为了保证传递给组件的 props 符合预期的类型，可以使用 PropTypes 进行类型检查。PropTypes 是一个独立的库，需要单独安装。例如：

// www.javascriptcn.com code example
import PropTypes from 'prop-types';

function ChildComponent(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

ChildComponent.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number
};

在上面的示例中，我们使用 PropTypes 来确保 name 是字符串类型，age 是数字类型。

Props 是 React 中非常重要的概念，通过 props 可以实现组件之间的数据传递和交互。熟练掌握 props 的使用可以让你更好地构建 React 应用。