React (三) 修改props，React父传子、子传父、this绑定

最新推荐文章于 2024-07-31 16:51:58 发布
最新推荐文章于 2024-07-31 16:51:58 发布
阅读量6.2k 收藏 6
点赞数 3
分类专栏： React javaScript 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/StevenTang957/article/details/115201398
版权

Props介绍与应用

什么是 props

props 可以看成一个对外的接口，用来接收外部传入的数据。组件中主要有两种属性 props 和 state 无论 props 或者 state 中哪两个发生了改变都会重新引发渲染

如何使用

如果你使用过 Vue，也肯定使用过父传子和子传父的功能，在 react 中也有父子通信。

父传子

函数组件

上一篇文章我讲述了使用[...props] 来进行传值，那是一种简写。

// 父组件
function Component1(){
    // 创建一个ref
    const porps = {name: 'ccc',age:18};
  	const a = {h: 'ccc'};
    return (
        <div style={divStyles} title={divTitles} className="App" tab-index="1">
            <User {...porps} />    {/* 使用简写 */}
            <User name='我没有用简写' age='18' />
              {/* 如果是非字符串 就要用大括号*/}
						<User name='我没有用简写' age='18' title={a}/>
        </div>
    );
}
// 通过参数去接受值
function User(props){
    return(
        <div>
            <h2>我是user组件</h2>
            <p>{props.name}---{props.age}</p>
        </div>

    );
}

上面的代码中就是简写和非简写的区别。可以直接在组件编写属性的方式传参数，在用 props 去接收参数。

我们都知道react在没有 hook 之前他们两个的区别主要在于有无 state 和生命周期，类组件可以使用生命周期和构造函数，而函数组件中只有 props，函数组件也称为无状态组件。类组件如果有 state 就是有状态组件，没有 state 就是无状态组件。如果类组件没有 state 推荐使用函数组件（函数组件效率高于类组件）。有了 hook 之后 在函数组件组件里面也可以使用 state。

类组件

类组件中如何传值

// 定义一个函数组件和写内联样式
// 父组件
function Component1(){
    // 创建一个ref
    const porps = {name: 'ccc',age:18};
  	const a = {h: 'ccc'};
    return (
        <div style={divStyles} title={divTitles} className="App" tab-index="1">
            <User {...porps} />    {/* 使用简写 */}
            <User name='我没有用简写' age='18' />
              {/* 如果是非字符串 就要用大括号*/}
						<User name='我没有用简写' age='18' title={a}/>
        </div>
    );
}

// 类组件 props 被实例化了 可以直接使用this.去访问之后在结构
class Footer extends React.Component {
    render() {
        const {name,age} =this.props;
        return(
            <div>
                <h1>我是一个类组件{name}---{age}</h1>
            </div>
        );
    }
}

默认值

可以通过 defaultProps 设置默认值

// 父组件
function Component1(){
    // 创建一个ref
    const porps = {name: 'ccc',age:18};
  	const a = {h: 'ccc'};
    return (
        <div style={divStyles} title={divTitles} className="App" tab-index="1">
            
            <User/>
              {/* 如果是非字符串 就要用大括号*/}
						<User name='我没有用简写' age='18' title={a}/>
        </div>
    );
}

// 子组件
function User(props){
    return(
        <div>
            <h2>我是user组件</h2>
            <p>{props.name}---{props.age}</p>
        </div>

    );
}

User.defaultProps = {
    age: 20,
    name: 'xxx'
};

子传父

props 可以接受任意类型的值。我们可以利用这个特性来实现子组件到父组件的传值，我们可以传递一个函数，通过函数传参的方式，来实现这一功能。这里使用的 this 绑定方式这里查看介绍

// 父组件
function Component1(){
    // 创建一个ref
    const userRef = React.createRef();
    const porps = {name: 'ccc',age:18};
    function getData(data){
        console.log('我是接受接受到子组件的值', data);
    }
    return (
        <div style={divStyles} title={divTitles} className="App" tab-index="1">
            <Footer {...porps} getData={getData} ref={userRef}></Footer>
        </div>
    );
}


// 子组件
class Footer extends React.Component {
    constructor(props){
        super(props);
        // 组件内部的状态 通过 setState 方法来更改的
        this.state = {
            name1:props.name+'ttt',
            num: 0
        };
    }
    add = () => {
        this.setState(state =>({
            num: ++state.num,
        }));
        this.props.getData(this.state.num);
    }
    render() {
        const {name,age} =this.props;
        return(
            <div>
                <h1>我是一个类组件{this.state.name1}---{age}</h1>
                <button onClick={this.add}>点我加一{this.state.num}</button>
            </div>
        );
    }
}

修改 props

在 React 中我们不能直接修改 props

// 子组件
function User(props){
  props.name = 'ttt';
    return(
        <div>
            <h2>我是user组件</h2>
            <p>{props.name}---{props.age}</p>
        </div>

    );
}
// 第三行报错

上面的代码会报错，props 是个只读属性。在 react 中数据流是单向的，不能改变一个组件在渲染是传进来的 props。因为组件会复用，如果可以修改 props，结果会不可预测，也违背了组件的设计原则，但是这并不代表在 props 不能修改**。**

可以通过 state 来变相修改 props。state 可以理解为中间人，主要是利用了 react 里面的重新渲染（setState）方式把props传入到组件中，在通过赋值到 state，在来修改。

// 父组件
function Component1(){
    const userRef = React.createRef();
    const porps = {name: 'ccc',age:18};
    return (
        <div style={divStyles} title={divTitles} className="App" tab-index="1">
            <Footer {...porps} ref={userRef}></Footer>
        </div>
    );
}

// 子组件
class Footer extends React.Component {
  // constructor是构造器函数,如果没有申明,会自动添加,而且只会执行一次
  constructor(props){
  	super(props);
    // 组件内部的状态 通过 setState 方法来更改的
    this.state = {
    	name1:props.name+'ttt'
    }
  }
    render() {
        const {name,age} =this.props;
        return(
            <div>
                <h1>我是一个类组件{this.state.name1}---{age}</h1>
            </div>
        );
    }
}

constructor 里面除了修改 props 还可以进行函数绑定

// 父组件
function Component1(){
    const userRef = React.createRef();
    const porps = {name: 'ccc',age:18};
    return (
        <div style={divStyles} title={divTitles} className="App" tab-index="1">
            <Footer {...porps} ref={userRef}></Footer>
        </div>
    );
}

// 子组件
class Footer extends React.Component {
    constructor(props){
        super(props);
        // 组件内部的状态 通过 setState 方法来更改的
        this.state = {
            name1:props.name+'ttt',
            num: 0
        };
        this.add = this.add.bind(this);
    }
    add(){
        this.setState(state =>({
            num: ++state.num,
        }));
    }
    render() {
        const {name,age} =this.props;
        return(
            <div>
                <h1>我是一个类组件{this.state.name1}---{age}</h1>
                <button onClick={this.add}>点我加一{this.state.num}</button>
            </div>
        );
    }
}

事件监听 this 绑定

this 一共有四种绑定方式，一种就是我上面说的在 constructor 使用 bind 绑定。而且这种方法也是官方推荐的。

下面我来介绍其他三种

直接在 jsx 元素上进行绑定（不推荐）

// 父组件
function Component1(){
    const userRef = React.createRef();
    const porps = {name: 'ccc',age:18};
    return (
        <div style={divStyles} title={divTitles} className="App" tab-index="1">
            <Footer {...porps} ref={userRef}></Footer>
        </div>
    );
}

// 子组件
class Footer extends React.Component {
    constructor(props){
        super(props);
        // 组件内部的状态 通过 setState 方法来更改的
        this.state = {
            name1:props.name+'ttt',
            num: 0
        };
    }
    add(){
        this.setState(state =>({
            num: ++state.num,
        }));
    }
    render() {
        const {name,age} =this.props;
        return(
            <div>
                <h1>我是一个类组件{this.state.name1}---{age}</h1>
                <button onClick={this.add.bind(this)}>点我加一{this.state.num}</button>
            </div>
        );
    }
}

上面代码中我们直接在 button 上进行了绑定。但是这样子会出现一个问题，就是每次在渲染组件的时候，都会创建一个新的函数。会造成额外的渲染，影响性能。

箭头函数（推荐）

使用了 ES6 的类字段

// 父组件
function Component1(){
    const userRef = React.createRef();
    const porps = {name: 'ccc',age:18};
    return (
        <div style={divStyles} title={divTitles} className="App" tab-index="1">
            <Footer {...porps} ref={userRef}></Footer>
        </div>
    );
}

// 子组件
class Footer extends React.Component {
    constructor(props){
        super(props);
        // 组件内部的状态 通过 setState 方法来更改的
        this.state = {
            name1:props.name+'ttt',
            num: 0
        };
    }
    add = () => {
        this.setState(state =>({
            num: ++state.num,
        }));
    }
    render() {
        const {name,age} =this.props;
        return(
            <div>
                <h1>我是一个类组件{this.state.name1}---{age}</h1>
                <button onClick={this.add}>点我加一{this.state.num}</button>
            </div>
        );
    }
}

因为箭头函数本身没有 this 属性，所以他的 this 指向的是 Footer 这个类本身，这个方法是推荐的因为不会存在多重绑定的问题。

直接在 jsx 上使用箭头函数(不推荐)

// 父组件
function Component1(){
    const userRef = React.createRef();
    const porps = {name: 'ccc',age:18};
    return (
        <div style={divStyles} title={divTitles} className="App" tab-index="1">
            <Footer {...porps} ref={userRef}></Footer>
        </div>
    );
}

// 子组件
class Footer extends React.Component {
    constructor(props){
        super(props);
        // 组件内部的状态 通过 setState 方法来更改的
        this.state = {
            name1:props.name+'ttt',
            num: 0
        };
    }
    add = () => {
        this.setState(state =>({
            num: ++state.num,
        }));
    }
    render() {
        const {name,age} =this.props;
        return(
            <div>
                <h1>我是一个类组件{this.state.name1}---{age}</h1>
                <button onClick={() => {
                    this.setState(state =>({
                        num: ++state.num,
                    }));
                }}>点我加一{this.state.num}</button>
            </div>
        );
    }
}

直接在 jsx 上使用箭头函数会导致和直接在 jsx 上进行绑定一样的问题就是每次在渲染组件的时候，都会创建一个新的函数。会造成额外的渲染，影响性能。事件只要是在 render 上绑定事件都会出现性能问题。

SteveTang957
关注
专栏目录
react修改props_React 函数式组件性能优化指南
weixin_30750081的博客
01-24 1986
前言目的本文只介绍函数式组件特有的性能优化方式，类组件和函数式组件都有的不介绍，比如 key 的使用。另外本文不详细的介绍 API 的使用，后面也许会写，其实想用好 hooks 还是蛮难的。面向读者有过 React 函数式组件的实践，并且对 hooks 有过实践，对 useState、useCallback、useMemo API 至少看过文档，如果你有过对类组件的性能优化经历，那么这篇...
react修改props_好程序员web前端培训分享React学习笔记（二）
weixin_39923262的博客
12-30 705
　　好程序员web前端培训分享React学习笔记(二)，组件的数据挂载方式，属性(props)props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props　　属性是描述性质、特点的，组件自己不能随意更改。　　之前的组件代码里面有props的简单使用，总的来说，在使用一个组件的时候，可以把参数放在标签的属...
React中---"props" 及 父组件如何向子组件传值(组件通信-父传子)
weixin_33704234的博客
10-25 1543
2019独角兽企业重金招聘Python工程师标准>>> ...
React学习之props(父传子，子传父),Context组件之间的传参。
最新发布
Jocelyn_书
07-31 699
React学习笔记记录，props在react组件中如何使用。父级组件向下传参，下级组件向上传参。当组件层级较深的，使用props传递数据要经过多层的传递很麻烦，就可以使用到context数据管理。当组件嵌套的层级不是很深时，结果简单时，使用props进行组件的传参。当组件嵌套冗余，层级很深的时候，就可以使用context来进行组件传参。
React Props(父传子)
A_bad_horse的专栏
04-16 262
学习目标 了解prop概念 了解父传子的原理 Props 父传递给子组件数据，单向流动，不能子组件传递给父组件。 props的传值，可以是任意类型。 Props默认值设置 HelloMessage.defaultProps = {name:"Bill"} 注：props可以传递函数，props可以传递父元素的函数，可以修改父元素的state,从而达到...
React中props的使用(父传子)
qq_43412333的博客
01-14 251
主要使用原先的index.js和header.js来进行演示 1 修改index.js中的代码如下 2 回到子组件header.js,修改里面的代码 3保存运行 npm run start 运行结果如下 ...
React之props详解
subsistent的博客
04-09 3306
1.props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props纯函数：输入一定，输出一定确定总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件props对象的键值，但是不能直接更改 props。3.通过函数创建的组件，需要通过函数的参数来接收props，通过类创建的组件，需要通过this.props来接收。
react 中父组件与子组件双向绑定问题
10-16
React中父组件与子组件的双向绑定问题，指的是在React组件开发中，数据在父组件与子组件之间相互影响的过程。在React中，通常不推荐使用双向绑定，因为这与React的单向数据流（Unidirectional Data Flow）原则相悖。...
React 子组件向父组件传值的方法
08-29
在 React 中，我们可以使用 props 来实现子组件向父组件传值。props 是 React 中的一种机制，允许父组件将数据传递给子组件。在我们的示例中，我们将创建一个父组件和一个子组件，子组件将输入的邮箱地址传递给父...
react中父子组件传值详解，如何进行传值校验（父传子，子组件改变父组件的值）
weixin_45745641的博客
03-12 2266
文章目录父子组件的传值父子组件重名问题解决子组件改变父组件的值传值校验 父子组件的传值 在react中，父传子可以使用props的方法，子传父使用props的回调函数 父组件： 在父组件中定义state，将这个state对象传给子组件，所以可以直接在son组件上写{…this.state} import React, { Component } from 'react' import Son from './son' export class Parent extends Component {
详解三种方式在React中解决绑定this的作用域问题并传参
10-14
在React开发过程中，经常遇到的一个常见问题是`this`作用域问题，这通常发生在类组件的方法中，导致无法访问到组件的`state`或`props`。本文将详细讲解三种解决在React中`this`作用域问题并传参的方法。 ### 方法一...
详解React中传入组件的props改变时更新组件的几种实现方法
10-18
主要介绍了详解React中传入组件的props改变时更新组件的几种实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【React系列】父子组件通信—props属性传值
川峰的博客
01-02 1360
AppMainAppHeaderHeaderHeaderMainBanner总之，在一个React项目中，组件之间的通信是非常重要的环节；props。
vue和react中props变化后修改state
前端精髓
08-17 1459
如果只想在 state 更改时重新计算某些数据，比如搜索框案例。 vue <template> <div> <input type="text" v-model="filterText"> <ul> <li v-for="item in filteredList" :key="item.id"> ...
React(一)——组件以及Props
我是我
10-09 1163
react组件/props
【React函数组件&类组件的props属性】
橙子的博客
08-19 1549
React框架规定Props是不能被修改的， 也就是说Props是个只读的参数。3、可以通过’组件名.defaultProps={ default: 值 }’ 方式来设置类组件的props属性值。2、在类组件的构造方法中必须使用super(props)完成父类的构造。注意：'属性名’就是参数名,会封装到props中。1、用于React函数组件的参数的输入。1、类组件默认含有props属性。3、props属性是只读的。// 1、获取页面的元素。// 2、定义函数组件。
React-props
前人挖坑，后人种（pen）
05-03 550
1.props和state的区别，state是内部的，内部的操作触发setState方法；props类似于Java的构造器传过来的参数，一般是外界传入的数据。2.例子：主view由于点击事件，触发state中的数据变动，该state的数据又是子view的props中的数据import React from 'react' class MyOwnPage extends React.Compone...
react中的props
qq_36529459的博客
05-18 478
在开发react的时候，是分为组件来进行开发的，正是有了组件化模式，给开发带来了许多的方便。在使用react组件的时候，因为都是单组件，因此，在子组件需要父组件的方法的时候，我们就要想办法来获取了。react中是提供的单向绑定，而并不是像vue是可以进行双向绑定的。当然拉，react也可以做当逆向传输，这个我将在下一篇文章中介绍。言归正传，react中，使用单向传输就必须使用props了。在rea...
react之props
qq_29055201的博客
05-10 148
react之props（属性），是纯函数的写法，不允许修改，props表示函数的输入。函数的输出是一个reactElement 用一个函数表示：V = f(props)
react 子组件点击事件绑定父组件函数、
08-16
React子组件可以通过将父组件的函数作为props传递给子组件来绑定点击事件。在子组件中，可以通过调用父组件传递的函数来触发父组件中定义的事件处理程序。 在父组件中，定义一个处理点击事件的函数。然后将这个函数作为props传递给子组件。在子组件中，可以通过props访问到父组件传递的函数，然后将这个函数绑定到子组件的点击事件上。 例如，我们有一个父组件Parent和一个子组件Child。在Parent组件中定义一个handleClick函数来处理点击事件，然后将这个函数作为props传递给Child组件。 Parent组件中的代码可以是这样的： ```javascript class Parent extends React.Component { handleClick() { console.log('父组件中的点击事件处理函数'); } render() { return <Child onClick={this.handleClick} />; } } ``` Child组件中的代码可以是这样的： ```javascript class Child extends React.Component { render() { return <button onClick={this.props.onClick}>点击我</button>; } } ``` 在Child组件中，我们将父组件传递的handleClick函数作为props中的onClick属性，然后在button元素的onClick事件中使用this.props.onClick来触发父组件的事件处理程序。 这样，当点击Child组件中的按钮时，就会触发父组件中定义的handleClick函数。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [React组件创建与事件绑定](https://blog.csdn.net/u012190388/article/details/128438333)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [React父子组件间方法调用](https://blog.csdn.net/noeal/article/details/115300055)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值