React   发布时间:2019-10-13  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了React中props大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧

昨天按摩没到位,导致今天身体不太行,撸码千万别苦了自己,活着最重要

我们先来搞一搞React中props的使用,React项目的基本搭建我就不做了,很简单。直接开始上内容好吧

1.和Vue一样React也使用props来进行父组件往子组件传参,基本使用还是很简单的

s.props.属性名   即可拿到父组件传过来的值

 

import React,{ Component,Fragment} <span style="color: #008000">//<span style="color: #008000">React的props传参

<span style="color: #008000">//<span style="color: #008000"> 父组件
<span style="color: #0000ff">class<span style="color: #000000"> App extends Component {
render() {
<span style="color: #0000ff">return<span style="color: #000000"> (

<Child aaa=<span style="color: #800000">"<span style="color: #800000">红牛<span style="color: #800000">">

<span style="color: #008000">//
<span style="color: #008000"> 子组件

<span style="color: #0000ff">class
<span style="color: #000000"> Child extends Component{
render(){
<span style="color: #0000ff">return<span style="color: #000000"> (
{<span style="color: #0000ff">this.props.aaa}
<span style="color: #000000">
)
}
}

export <span style="color: #0000ff">default App;

(我在这里提醒一句,文章所有代码都运行在搭好的React环境中,千万别拉到本地直接扔到一个html文件里,一运行一看运行不起来,这就好比在一个没有空气的星球,试图靠空气生存一样,空气都没有,你说能活下去嘛)

运行结果:

title="React中props" alt="React中props" src="https://cn.js-code.com/res/2019/03-01/22/b19c56e70dc5dccc093833696d322fd0.png" >

2.现在基本传参可以了,那能不能传点别的过去,当然可以,要是只能传参数岂不是很鸡肋,下面我们来试试能不能传一个函数过去,当然是可以的

s.props.函数名()来调用函数并且执行

<div class="cnblogs_code">

import React,Fragment}  <span style="color: #008000">//<span style="color: #008000">React的props传参

<span style="color: #008000">//<span style="color: #008000"> 父组件
<span style="color: #0000ff">class<span style="color: #000000"> App extends Component {
render() {
<span style="color: #0000ff">return<span style="color: #000000"> (

<Child aaa=<span style="color: #800000">"<span style="color: #800000">红牛<span style="color: #800000">" bbb={<span style="color: #0000ff">this.hanshu}>

{ <span style="color: #008000">//<span style="color: #008000"> 子组件
<span style="color: #0000ff">class
<span style="color: #000000"> Child extends Component{
render(){
<span style="color: #0000ff">return
<span style="color: #000000"> (
{<span style="color: #0000ff">this.props.aaa}{<span style="color: #0000ff">this.props.bbb()}
<span style="color: #000000">
)
}
}

export <span style="color: #0000ff">default App;

运行结果:

title="React中props" alt="React中props" src="https://cn.js-code.com/res/2019/03-01/22/2df86426f13e381bb9301dc2f3fe751e.png" >

3.学过Vue的同学可能会知道Vue里面是可以对props传过来的值进行验证的,比如他的类型,是否为空,默认值等等,那在我们的React中有没有对props进行验证呢,答案是肯定的

  只不过React的props验证没有Vue的验证用起来方便,下面我们来看一看React中props具体是怎么验证的

   下面我们直接将代码发上来好吧

    

import React,Fragment} from 'react''prop-types'

<span style="color: #008000">//<span style="color: #008000"> 父组件
<span style="color: #000000">class App extends Component {
render() {
<span style="color: #0000ff">return<span style="color: #000000"> (

<Child aaa="红牛" ccc="大红枣">

<span style="color: #008000">//
<span style="color: #008000"> 子组件

<span style="color: #000000">class Child extends Component{
render(){
<span style="color: #0000ff">return<span style="color: #000000"> (
{<span style="color: #0000ff">this<span style="color: #000000">.props.aaa}


{<span style="color: #0000ff">this<span style="color: #000000">.props.bbb}


{<span style="color: #0000ff">this<span style="color: #000000">.props.ccc}


{<span style="color: #0000ff">this<span style="color: #000000">.props.ddD}

Child.propTypes ={ number(不传不会报错,仅仅是限制已传入的参数类型) s.number, s.isrequired, s.String.isrequired }

<span style="color: #008000">//<span style="color: #008000">设置默认值
Child.defaultProps =<span style="color: #000000"> {
ddd:"默认值"<span style="color: #000000">
}

export <span style="color: #0000ff">default App;

运行结果:

title="React中props" alt="React中props" src="https://cn.js-code.com/res/2019/03-01/22/f206704eb60242238e216ddd0bb375ad.png" >

      

title="React中props" alt="React中props" src="https://cn.js-code.com/res/2019/03-01/22/d278ac186001b7ce42f51c72b8c592c9.png" >

     String,期望为number

.bbb需要被传入

    我们可以看到结果都显示了,但是报错了,所以我们得到一个结论,验证不通过会报错,但是实际上并不影响我们页面的正常显示

在类的里面

import React,Fragment} from 'react''prop-types'

<span style="color: #008000">//<span style="color: #008000"> 父组件
<span style="color: #000000">class App extends Component {
render() {
<span style="color: #0000ff">return<span style="color: #000000"> (

<Child aaa="红牛" ccc="大红枣">

<span style="color: #008000">//
<span style="color: #008000"> 子组件

<span style="color: #000000">class Child extends Component{
render(){
<span style="color: #0000ff">return<span style="color: #000000"> (
{<span style="color: #0000ff">this<span style="color: #000000">.props.aaa}


{<span style="color: #0000ff">this<span style="color: #000000">.props.bbb}


{<span style="color: #0000ff">this<span style="color: #000000">.props.ccc}


{<span style="color: #0000ff">this<span style="color: #000000">.props.ddD}

={ number(不传不会报错,仅仅是限制已传入的参数类型) s.number, s.String.isrequired, s.String.isrequired } static defaultProps ={ ddd:"默认值"export <span style="color: #0000ff">default App;

好了,暂时关于React中的props我就写这些,大家有需要的可以参,如有错误,请以官方文档为准,溜了溜了,用膳去

大佬总结

以上是大佬教程为你收集整理的React中props全部内容,希望文章能够帮你解决React中props所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: