前端之家收集整理的这篇文章主要介绍了
React中props,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧
昨天按摩没到位,导致今天身体不太行,撸码千万别苦了自己,活着最重要
我们先来搞一搞React中props的使用,React项目的基本搭建我就不做了,很简单。直接开始上内容好吧
1.和Vue一样React也使用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文件里,一运行一看运行不起来,这就好比在一个没有空气的星球,试图靠空气生存一样,空气都没有,你说能活下去嘛)
运行结果:
2.现在基本传参可以了,那能不能传点别的过去,当然可以,要是只能传参数岂不是很鸡肋,下面我们来试试能不能传一个函数过去,当然是可以的
函数
调用子组件时将函数传过去
函数名()来调用函数并且执行
<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;
3.学过Vue的同学可能会知道Vue里面是可以对props传过来的值进行验证的,比如他的类型,是否为空,默认值等等,那在我们的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 =
required,
required
}
<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;
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}
=
required,
required
}
static defaultProps ="默认值"export <span style="color: #0000ff">default App;