在 React 中,props(属性)用于在组件之间传递数据

这篇具有很好参考价值的文章主要介绍了在 React 中,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>
  );
};

完整解释代码文章来源地址https://www.toymoban.com/news/detail-608787.html


// 一个组件
// 通过函数参数来接收 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;

到了这里,关于在 React 中,props(属性)用于在组件之间传递数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【react】使用context进行跨级组件数据传递

    官方文档:使用 Context 深层传递参数、useContext 应用:无需为每层组件手动添加 props,能狗在组件树间进行数据传递的方法。 1、创建context ContextProvider.tsx: 要更新 context,请将其与 state 结合。在父组件中声明一个状态变量,并将当前状态作为 context value 传递给 provider。 上述写

    2024年01月25日
    浏览(38)
  • React组件间数据传递(弹框和高阶组件(HOC)特性实现)

    在现代前端开发中,React 已经成为了最受欢迎的 JavaScript 库之一。而在复杂的应用中,不同组件之间的数据传递问题显得尤为关键。在本文中,我们将探讨一种高效的方法,即如何利用弹框和高阶组件特性来实现 React 组件间的数据传递。我们将通过一个具体的业务场景来深入

    2024年02月11日
    浏览(40)
  • VUE,子组件给父组件传递参数,props 自定义属性,ref

    AA组件 BB CC

    2024年02月14日
    浏览(38)
  • React styled-components(二)—— props、attrs属性

    styled-components 可以 props 穿透,把属性穿透到元素中。 通常,用 css 的 input 组件实现一个密码输入框写法如下: 接下来用 styled-components 来实现,首先生成一个 input 组件,新建 Demo.js 文件: App.js 中引入 Demo.js 文件: 页面效果: 接下来,给生成的 ContextP 组件添加 type=password

    2023年04月18日
    浏览(38)
  • React - 你知道props和state之间深层次的区别吗

    难度级别:初级及以上                                 提问概率:60%  如果把React组件看做一个函数的话,props更像是外部传入的参数,而state更像是函数内部定义的变量。那么他们还有哪些更深层次的区别呢,我们来看一下。 首先说props,他是组件外部传入

    2024年04月13日
    浏览(29)
  • 组件与Props:React中构建可复用UI的基石

    目录 组件:构建现代UI的基本单位 Props:组件之间的数据传递 Props的灵活性:构建可配置的组件 组件间的通信:通过回调函数传递数据 总结: 组件:构建现代UI的基本单位 组件是前端开发中的关键概念之一。它允许我们将UI拆分成独立、可复用的部分,使得代码更易于理解

    2024年02月06日
    浏览(39)
  • React类组件中super()和super(props)有什么区别?

    在ES6中,通过extends实现类的继承,如下: 通过super实现调用父类,super代替父类的构建函数,相当于调用sup.prototype.constructor.call(this,name),如果子类不适用super会报错,报错的原因是子类没有自己的this对象,他只是继承父类的this对象,然后对其加工,也不能

    2024年01月24日
    浏览(48)
  • Vue前端框架10 组件的组成、组件嵌套关系、组件的注册方式、组件传递数据(props $emit)、数组传递多种数据类型、组件传递props校验、组件事件

    组件最大的优势就是可复用性 通常将组件定义在.vue中,也就是SFC单文件组件 组件的基本组成: 组件允许我们将UI划分为独立的、可重用的部分,并且对每个部分单独思考 实际应用中组件常常被组件成层层嵌套的树状结构 Vue组件使用前要注册,注册有两种方式:全局注册和

    2024年02月09日
    浏览(48)
  • vue3中父组件与组件之间参数传递,使用(defineProps/defineEmits),涉及属性传递,对象传递,数组传递,以及事件传递

    传递属性 父组件: 子组件: 传递对象或者数组 父组件: 子组件: 父组件: 子组件:

    2024年02月13日
    浏览(42)
  • React中父子组件参数传递讲解

    结合案例:github搜索案例 案例结果展示如下图 1.父容器代码 说明:父容器中包含了两个组件模块,分别是Search和List,用来搜索和显示 2.搜索Search子模块代码 3.展示Lisi子模块代码 父子参数传递分析 1.子(Search)传父(App) 首先在父容器APP的state中创建状态属性,再传给子模块Sea

    2024年02月09日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包