在 React 中，props（属性）用于在组件之间传递数据

最新推荐文章于 2025-10-21 18:17:02 发布

原创最新推荐文章于 2025-10-21 18:17:02 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

文章介绍了React中props的概念和用法，它是父组件向子组件传递数据的方式，包括数据、函数等。props是只读的，不能在子组件内直接修改，若需变更，需通过回调函数通知父组件。示例代码展示了如何定义和使用带有默认值的props。

在 React 中，props（属性）用于在组件之间传递数据。它是父组件向子组件传递信息的一种方式，通过 props，父组件可以向子组件传递数据、回调函数、配置项等。

注意： props 是只读的，它的值由父组件传递给子组件时确定，并且在子组件中不能直接修改。如果子组件需要改变这些值，应该通过回调函数等方式将要修改的数据传递给父组件，由父组件来更新相关的状态。

基本使用：

// 一个组件
// 通过函数参数来接收 props（）
const Module = (props) => {
   console.log(props);

  // 注意 prpos 是只读的对象，直接操作会报错
  // props.size = 30;

  return (
    <div>
      <p>组件</p>
      {/* <img src={props.imgUrl} width={props.size} alt="" /> */}
      <img src={imgUrl} width={size} alt="" />
    </div>
  );
};

使用组件：

给组件传递 props（注意：如果要给组件传递非字符串类型的数据，要使用 {} 来传递）

//  react 中的 props 的使用
const App = () => {
  return (
    <div>
      <p>使用</p>
      <Module
        size={200}
        imgUrl="https://p3-passport.byteimg.com/img/user-avatar/732186508929940c0ea6978021bc9f76~100x100.awebp"
      ></Module>
    </div>
  );
};

export default App;

通过解构简化使用，还可以再此处赋初始值

const Module = ({ imgUrl, size = 50 }) => {

  return (
    <div>
      <p>组件</p>
      <img src={imgUrl} width={size} alt="" />
    </div>
  );
};

完整解释代码


// 一个组件
// 通过函数参数来接收 props（）
// const Module = (props) => {

// 通过解构简化，可以再此处赋初始值
const Module = ({ imgUrl, size = 50 }) => {
  // console.log(props);

  // 注意 prpos 是只读的对象，直接操作会报错
  // props.size = 30;

  return (
    <div>
      <p>组件</p>
      {/* <img src={props.imgUrl} width={props.size} alt="" /> */}
      <img src={imgUrl} width={size} alt="" />
    </div>
  );
};

//  react 中的 props 的使用
const App = () => {
  return (
    <div>
      <p>123</p>
      {/* 给组件传递 props（注意：如果要给组件传递非字符串类型的数据，要使用 {} 来传递） */}
      <Module
        size={200}
        imgUrl="https://p3-passport.byteimg.com/img/user-avatar/732186508929940c0ea6978021bc9f76~100x100.awebp"
      ></Module>
    </div>
  );
};

export default App;