React属性传递

最新推荐文章于 2023-03-14 20:56:33 发布
最新推荐文章于 2023-03-14 20:56:33 发布
阅读量2.6k 收藏
点赞数 2
分类专栏： react 文章标签： React 属性传递
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/b1244154318/article/details/52685088
版权

React属性传递


    属性:属性是在一个组件被声明的时候就被（父组件）赋予的，并且不可以被修改.属性被传递的方式一般是在组件被调用的时候被传,除了可以传递字符串以外,还可以传,对象，数组.

  属性的传递主要有两种方法:

1. 属性的设置和传递（键值对设置）:

   2. 展开形式设置props

varobj={name:"1",attr:"009"}

如果希望将这个json中的全部数据都放在react中作为组件属性

<ComponentName{...obj}/>

这样就可以实现属性的传递 ,前面加上三点react会把整个obj都放在属性里props面去

例子1:键值对设置:传递字符串

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>React</title>
	<script src="lib/react.min.js"></script>
    <script src="lib/react-dom.min.js"></script>
    <script src="lib/browser.min.js"></script>
</head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
        var Hello=React.createClass({
        render:function(){
        var style={"font-size":"40px",
        color:"green",width:"200px",height:"300px","text-align":"center",border:"1px solid gray"};
        console.log(this.props.name)
            return (
                <div style={style}><span>我出来了!</span>
                    <input type="text" value={this.props.name}/>
                </div>
            )
        }
    })
    var str="哈哈哈";
      ReactDOM.render(
        <Hello name={str}/>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>
例子2: 键值对设置:传递对象 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>React</title>
	<script src="lib/react.min.js"></script>
    <script src="lib/react-dom.min.js"></script>
    <script src="lib/browser.min.js"></script>
</head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
        var Hello=React.createClass({
        render:function(){
        var style={
                "font-size":"40px",
                color:"green",
                width:"200px",
                height:"300px",
                "text-align":"center",
                border:"1px solid gray"
            };
        console.log(this.props.title)
            return (
                <div style={style}><span>我出来了!</span>
                    <input type="text" value={this.props.title.name}/>
                </div>
            )
        }
    })
    var str={"name":"小红","age":"18"};
      ReactDOM.render(
        <Hello title={str}/>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>
例子3: 三点式:传递对象 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>React</title>
	<script src="lib/react.min.js"></script>
    <script src="lib/react-dom.min.js"></script>
    <script src="lib/browser.min.js"></script>
</head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
        var Hello=React.createClass({
        render:function(){
        var style={
                "font-size":"40px",
                color:"green",
                width:"200px",
                height:"300px",
                "text-align":"center",
                border:"1px solid gray"
            };
        console.log(this.props)
            return (
                <div style={style}><span>我出来了!</span>
                    <input type="text" value={this.props.age}/>
                </div>
            )
        }
    })
    var str={"name":"小红","age":"18"};
      ReactDOM.render(
        <Hello {...str}/>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>
例子4: 三点式:传递数组 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>React</title>
	<script src="lib/react.min.js"></script>
    <script src="lib/react-dom.min.js"></script>
    <script src="lib/browser.min.js"></script>
</head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
        var Hello=React.createClass({
        render:function(){
        var style={
                "font-size":"40px",
                color:"green",
                width:"200px",
                height:"300px",
                "text-align":"center",
                border:"1px solid gray"
            };
        console.log(this.props)
            return (
                <div style={style}><span>我出来了!</span>
                    <input type="text" value={this.props[3]}/>
                </div>
            )
        }
    })
    var str=["xch","xdd","ddd","eee","www"];
      ReactDOM.render(
        <Hello {...str}/>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>





Web攻城狮
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React三种通过属性传递组件本身的方法
weixin_43073401的博客
07-01 883
是因为每次父组件重新渲染时，都会调用一次函数，即使函数的返回值没有变化。这样会导致 React 认为子组件的属性发生了变化，从而触发子组件的重新渲染。直接传递 JSX 创建好的元素的方法会造成不必要的渲染，是因为每次父组件重新渲染时，都会创建一个新的 JSX 元素，即使它的内容没有变化。这样会导致 React 认为子组件的属性发生了变化，从而触发子组件的重新渲染。在上述代码中，每次 Profile 重新渲染时，都会创建一个新的 JSX 元素，每次 person 属性变化时，都会重新渲染 Avatar。
react 对传入属性props类型、必填限制及默认值设置
m0_45382009的博客
12-01 1162
import React, { Component } from 'react' import PropTypes from 'prop-types' // 1.引入prop-types export default class Child extends Component { // 2.给类本身添加属性propTypes、defaultProps(用static) static propTypes={//类型、必填限制 name:PropTypes.string.is.
初学react（四）：组件属性传递（传事件）
qq_37942845的博客
05-14 544
React-属性传递（传事件） a. 可以把函数当作属性传递过去，子组件内props接收 b.注意普通函数不能直接加括号，会直接执行 {/* 函数不能加括号，加括号就直接执行了,使用箭头函数可以实现参数的传递 */} {/* <button onClick={() => this.switchNameHandLer('古天乐')}>更改状态值</button>...
React 组件之间传递值和事件的几种方式
kiku
02-18 2877
父组件向子组件传值和传递事件 函数组件 props 父组件 <Welcome fname="gxh" func={ func}/>; 子组件 function Welcome(props) { this.props.func() // 触发父组件事件 return <h1>Hello, {props.fname}</h1>; // 获取值 } class 组件 props 父组件 <Welcome cname="gxh" cfunc={this.fun
React组件传值（类组件）
sxp19980829的博客
03-14 378
【代码】React组件传值（类组件）子传父 父传子 祖孙传
react 的 传递属性 props 详解
北芒的博客
05-22 4723
什么是 props ？ 就是你在使用一个组件的时候希望这个组件可以复用，希望他里面的形态、所需的数据可以在我们调用的时候可以动态的传进去。 props 哪里来的？ 我们组件使用类创建的时候你需要继承 React.component，这个 props 就是继承React 来的 打印当前实例 console.log(this) 传递属性 <组件名 属性名=值 属性名2=值2 .. /> propName="字符" propName={js数据类型} 调用组件名的时候可以传递.
React消息传递
MIR_zhang的博客
03-30 810
React消息传递 在React中，数据流动是单向的(单向数据流)，父组件通过props将数据传递到子组件，子组件根据父组件传递来的属性和组件内部状态来确定如何渲染。因为单向数据流的特性，父组件向子组件传递数据是很容易的，即通过props传递数据，且子组件不能修改自己的props；父组件向孙子组件或者后代组件传递数据同样可以利用props进行层层传递。但是，开发过程中我们会遇到各种各样的情况，譬...
浅谈React 属性和状态的一些总结
11-28
在React开发中，属性（props）和状态（state）是两个关键的概念，它们共同决定了组件的行为和呈现。本文将深入探讨这两个概念，并提供一个简单的示例来加深理解。 首先，让我们了解一下属性（props）。属性是父组件...
React通过父组件传递类名给子组件的实现方法
10-19
从技术上讲，父组件通过属性传递的方式将一个字符串类型的类名传递给子组件。子组件在其渲染方法中根据条件判断决定最终应用的类名。在实际的项目开发中，这样的模式可以用来动态地控制子组件的样式，使得父组件能够...
聋人React本地传递
02-15
1. **Props（属性）**：父组件通过props向子组件传递数据是最基础的方式。在聋人React应用中，这同样适用，可以通过props传递聋人用户可能需要的特殊界面元素或功能。 2. **State（状态）**：当需要在组件内部管理...
聋人React性传递
03-04
标题 "聋人React性传递" 可能是指在React应用中实现无障碍（ Accessibility，简称a11y）功能，特别是针对听障用户的设计和开发。React是一个流行的JavaScript库，用于构建用户界面，而无障碍功能是确保所有用户，...
React入门之--组件属性的传递
飞翔的小白
08-15 332
废话不多说，上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性从最外层传到最里层的实现</title> <script src="../dist/browser.min.js">&lt...
react中的解构赋值例子
lskshz的专栏
05-20 8336
const User = () => { return ( {/* 搜索过滤 */} {/* 用户列表 */} {/* Modal对话框,点击创建用户按钮时弹出 */} ) } 在React的设定中，初始化完props后，props是不可变的。 为了解决这个问题，React引入了
React-属性传值（传事件）
wa2661391317的博客
02-27 687
1.给事件传递一个参数 2.使用属性传值传递一个函数
react --- 组件以及通过属性传值
hahahahahahahaha__1的博客
05-25 576
1.在使用时需要引入的文件：&lt;script src='react.js'&gt;&lt;/script&gt;&lt;script src='react-dom.js'&gt;&lt;/script&gt;&lt;script src='babel.min.js'&gt;&lt;/script&gt;//用来将ES6语法转化为ES5语法2.代码：        &lt;div id='exa...
初次接触React
Fsskay的博客
09-08 193
目前写完在线账本后对React的浅薄理解 1.面向对象,单向数据流,对数据的处理是React的关键. 刚接触React的时候觉得与原生JS和JQUERY完全不同,看视频看得一头雾水,相对来说React更为抽象一点 2.React的JSX与组件比较方便 React 快速构建 React 开发环境 $ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm/yarn start JSX的点 1.API写法与原生不
React中组件的props属性传递机制
清颖的博客
08-11 1835
React中组件的属性传递机制，由父组件传递给子组件，不能跨级传递。当有多个组件嵌套时，从最外层的祖先组件的props开始，依次向其后代组件传递props。
react笔记组件属性传递机制（四）
前端岚枫
03-15 407
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;复合式组件设计&lt;/title&gt; &lt;script src="../build/react.js"&gt;&lt;/script&
react路由传递参数
最新发布
09-08
在React中，传递参数的方式有多种常见的方式。一种是通过link路由跳转时，在URL中拼接参数，可以使用params或search参数进行传递。使用params参数时，可以通过this.props.match.params来获取传递的参数，属性名和你...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值