在React中传递道具(也称为“属性”)

作者 : IT 大叔 本文共572个字,预计阅读时间需要2分钟 发布时间: 2020-09-21

什么是道具

React中的道具(也称为“属性”)使我们可以将值从父组件传递到子组件。值可以是任何数据类型,从字符串函数对象等。

组件无法更改其属性-这只能在外部完成,因为父组件会更改传递的值。

(组件也具有称为状态的值,但与props不同,状态由组件本身直接初始化和管理。)

如何创建道具

为了将道具传递到组件,我们需要在渲染时将它们作为属性添加。编写它们的方式与编写HTML标记的属性的方式相同。

const catName = "Pusheen"
<Cat name={catName} />

使用上述代码,该<Cat>组件现在可以访问name设置为字符串“ Pusheen” 的prop /值。道具名称可以是任何名称,就像您可以给变量提供几乎任何名称一样。在这种情况下,prop的变量名已声明为name

传递道具

这是我们可以name<Cat>组件中访问prop的方式:

const Cat = (props) => {
  return (
    <div>
      My name is {props.name}.
    </div>
  )
}

确保首先props作为参数传递给整个功能组件。引用道具时,必须使用大括号。

如果我们将prop传递给类组件,它将看起来略有不同。

class Cat extends Component {
  render() {
    <div>
      My name is {this.props.name}.
    </div>
  }
}
免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 在React中传递道具(也称为“属性”)

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论