React中props

发布时间：2020-12-15 05:30:14 所属栏目：百科来源：网络整理

导读：今天让我们开启新的篇章好吧，来搞一搞React，以下所有操作都是我个人的一些理解，如果有错吴还请指出，想要看更全的可以去React官网可能一下子好吧昨天按摩没到位，导致今天身体不太行，撸码千万别苦了自己，活着最重要我们先来搞一搞React中props的使用

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

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

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

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

import React,{ Component,Fragment} //React的props传参

// 父组件
class App extends Component {
render() {
return (

<Child aaa="红牛">

// 子组件
class Child extends Component{
render(){
return (

{this.props.aaa}

)
}
}

export default App;

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

运行结果：

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

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;

运行结果：

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

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

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

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

// 父组件
class App extends Component {
render() {
return (

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

// 子组件
class Child extends Component{
render(){
return (

{this.props.aaa}

{this.props.bbb}

{this.props.ccc}

{this.props.ddd}

Child.propTypes = //设置默认值
Child.defaultProps = {
ddd:"默认值"
}

export default App;

运行结果：

　　　　，验证不通过会报错，但是实际上并不影响我们页面的正常显示

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

{this.props.aaa}

{this.props.bbb}

{this.props.ccc}

{this.props.ddd}

= ="默认值"export default App;

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!