首页 > 其他分享 >React:Props属性(父组件传值子组件)

React:Props属性(父组件传值子组件)

时间:2022-10-19 10:11:06浏览次数:51  
标签:render 传值子 React props 组件 class 属性

React 的一大特点是单向数据流。React 中的每一个组件,都包含有一个属性(props),属性主要是从父组件传递给子组件的,在组件内部,我们可以通过this.props获取属性对象。

1、定义和使用props 传值

  • 通过React类定义组件时:

    • 在父组件render 方法中调用组件时使用key/value 的形式来指定属性。

    • 在自定义子组件中通过this.props.key 来获得组件属性的值,需要使用{}括起来。

// 类定义组件时,使用属性 this.props.属性名称
class MyApp extends React.Component {
    render() {
        return (<p>{this.props.name}</p>);
    }
}
​
ReactDOM.render(
    <MyApp name="张三" />, 
    document.getElementById('root')
);

 

  • 通过React函数定义 组件时:

    • 在父组件render 方法中调用组件时使用key/value 的形式来指定属性。

    • 在自定义子组件中通过函数接收参数propsprops.key来获得组件属性的值,需要使用{}括起来

// 函数定义组件时,在组件内部使用属性值:props.属性名称
function Welcome(props) { // 函数需要传递一个参数props
    return(<h2>{props.title}</h2>)
}
​
ReactDOM.render(
    <Welcome title="张三" />, 
    document.getElementById('root')
);

 

2、默认Props

  • 定义默认props

class MyApp extends React.Component {
    render() {
        return <p>this is my {this.props.name}</p>
    }   
}
//由于是用ES6 class语法创建组件,其内部只允许定义方法,而不能定义属性,class的属性只能定义在class之外。所以defaultProps要写在组件外部。
MyApp.defaultProps = {
    name: 'xxx'
};
    
​
ReactDOM.render(
    <MyApp />,
    document.getElementById('root')
);
 

 

3、多属性传值

(1)定义一个this.props对象,在对象中声明多个键值对,用于表示组件的属性

(2)在组件中使用{...this.props}的方式传递属性。“...”表示JSX的延展操作符,这种方式可以很方便的为组件指定多个属性,并且为属性的值指定数据类型。

class MyApp extends React.Component {
    render() {
        return(
            <h1>{this.props.name} : {this.props.age} : {this.props.sex}</h1>
        );
    }
}
​
​
​
​
let p1 = {
    name: '张三', 
    age: 18,
    sex: '男'
};
​
ReactDOM.render(
    //<MyApp name='张三' age='18' sex='男' />
    <MyApp {...p1}/>,
    document.getElementById('root')
);

 

 

标签:render,传值子,React,props,组件,class,属性
From: https://www.cnblogs.com/LIXI-/p/16786900.html

相关文章

  • [原创]一款基于Reactor线程模型的java网络爬虫框架
    AJSpridergithub:​​https://github.com/zhuchangwu/AJSpider​​概述AJSprider是笔者基于Reactor线程模式+Jsoup+HttpClient封装的一款轻量级java多线程网络爬虫框架,简......
  • el-upload多文件上传组件封装
    文件多次上传,保留进度条<template><divclass="upload-file"><el-upload:action="uploadFileUrl":on-success="handleUploadSuccess"......
  • 使用vitepress构建组件库文档
    vitepress-demoblock  为vitepress添加更专业的Demo演示能力,让您在开发vue组件库或者vue相关文档编写时,可以通过引入vue文件的时候结果显示和代码演示。文档官方文......
  • vue中页面调用多次组件,会出现组件之间相互影响
    这个大部分发生在echarts和地图中,我们为了节省性能把echarts和map对象没有绑定在vue对象上导致,一个页面多次调用时会出现问题,解决办法:如果确定一个页面调用多次了,就把echa......
  • React组件之间的通信方式总结(下)
    一、写一个时钟用react写一个每秒都可以更新一次的时钟importReactfrom'react'importReactDOMfrom'react-dom'functiontick(){letele=<h1>{new......
  • React面试八股文(第二期)
    React.forwardRef是什么?它有什么作用?React.forwardRef会创建一个React组件,这个组件能够将其接受的ref属性转发到其组件树下的另一个组件中。这种技术并不常见,但在以下......
  • React组件之间的通信方式总结(上)
    先来几个术语:官方我的说法对应代码ReactelementReact元素letelement=<span>A爆了</span>Component组件classAppextendsReact.Component{}无Ap......
  • vue3+vite+ts自动引入api和组件
    安装cnpminstallunplugin-auto-importunplugin-vue-components-d配置//自动导入compositionapi和生成全局typescript说明importAutoImportfrom'unplugin-au......
  • react-router-dom(v6)快速上手
    本篇笔记跟随官方教程而写,把其中连续的步骤碎片化,方便以后忘记的时候直接调用,其中包含了对其他小问题的拓展。创建路由(quick-start)npminstallreact-router-dom在R......
  • 2022-10-19 react解析富文本
    <divdangerouslySetInnerHTML={{__html:values.content}}></div>dangerouslySetInnerHTML是react标签的一个属性,后面的__html跟返回的富文本数据。注:使用innerHTML......