良许Linux教程网 干货合集 讲解一下React Props

讲解一下React Props

React是一款颠覆式的前端解决方案,其创新的编程思想以及衍生出来的一些生态圈技术可以说是引领了整个前端的发展。

每一种新事物的出现都是为了解决某些问题,React也不例外。所以了解了它要解决的问题,就能更好的接受这个新的框架。在React出现之前,原生的JavaScript有哪些痛点:

  • 原生JavaScript操作DOM繁琐、效率低。
  • 使用JavaScript直接操作DOM,浏览器会进行大量的重绘重排。
  • 原生JavaScript没有组件化编码方案,代码效率低。

为什么要选择React?

  • 其声明式的语法可以让你直观的去描述和组织复杂的界面逻辑
  • 其繁荣的生态圈则为解决各种问题带来了大量的最佳实践
  • 其活跃的技术社区则让你在遇到问题的时候 能快速得到帮助
  • React技术栈不仅可以让你从容面对大型项目的开发其编程思想还可以运用到React Native进行原生开发
  • 其server端渲染的技术则可以让你进行同构的后端开发
image-20220822215654802

state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。


使用 Props

以下实例演示了如何在组件中使用 props:

React 实例

function HelloMessage(props) { return

Hello {props.name}!

; } const element = ; ReactDOM.render( element, document.getElementById('example') );

尝试一下 »

实例中 name 属性通过 props.name 来获取。


默认 Props

你可以通过组件类的 defaultProps 属性为 props 设置默认值,实例如下:

React 实例

class HelloMessage extends React.Component { render() { return (

Hello, {this.props.name}

); } } HelloMessage.defaultProps = { name: 'Runoob' }; const element = ; ReactDOM.render( element, document.getElementById('example') );

尝试一下 »


State 和 Props

以下实例演示了如何在应用中组合使用 state 和 props 。我们可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上。在 render 函数中, 我们设置 name 和 site 来获取父组件传递过来的数据。

React 实例

class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鸟教程", site: "https://www.runoob.com" } } render() { return (

); } } class Name extends React.Component { render() { return (

{this.props.name}

); } } class Link extends React.Component { render() { return ( {this.props.site} ); } } ReactDOM.render( , document.getElementById('example') );

尝试一下 »


Props 验证

React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库。

Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时,JavaScript 控制台会抛出警告。

以下实例创建一个 Mytitle 组件,属性 title 是必须的且是字符串,非字符串类型会自动转换为字符串 :

React 16.4 实例

var title = "菜鸟教程"; // var title = 123; class MyTitle extends React.Component { render() { return (

Hello, {this.props.title}

); } } MyTitle.propTypes = { title: PropTypes.string }; ReactDOM.render( , document.getElementById('example') );

尝试一下 »

React 15.4 实例

var title = "菜鸟教程"; // var title = 123; var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isRequired, }, render: function() { return

{this.props.title}

; } }); ReactDOM.render( , document.getElementById('example') );

尝试一下 »

更多验证器说明如下:

MyComponent.propTypes = { // 可以声明 prop 为指定的 JS 基本数据类型,默认情况,这些数据是可选的 optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, // 可以被渲染的对象 numbers, strings, elements 或 array optionalNode: React.PropTypes.node, // React 元素 optionalElement: React.PropTypes.element, // 用 JS 的 instanceof 操作符声明 prop 为类的实例。 optionalMessage: React.PropTypes.instanceOf(Message), // 用 enum 来限制 prop 只接受指定的值。 optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), // 可以是多个对象类型中的一个 optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), // 指定类型组成的数组 optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), // 指定类型的属性构成的对象 optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), // 特定 shape 参数的对象 optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string, fontSize: React.PropTypes.number }), // 任意类型加上 isRequired来使 prop 不可空。 requiredFunc: React.PropTypes.func.isRequired, // 不可空的任意类型 requiredAny: React.PropTypes.any.isRequired, // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用console.warn或抛异常,因为这样oneOfType 会失效。 customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error('Validation failed!'); } } } }

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部