使用react怎么在父组件与子组件之间值传递-创新互联

这篇文章将为大家详细讲解有关使用react怎么在父组件与子组件之间值传递,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观,专业网站建设服务10余年为成都白乌鱼小微创业公司专业提供企业网站制作营销网站建设商城网站建设手机网站建设小程序网站建设网站改版,从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

子组件

import React, { Component } from 'react'

export default class Item extends Component {
 constructor(props) {
  super(props)

  this.state = {
   prices: 0
  }
 }

 handleChange(){
  const prices =800;
  this.setState({
   prices: price
  })
  //用传过来的changePrice属性(props),是个函数,呼叫它把price交给父组件中的函数去处理
  this.props.changePrice(price)
 }

 render() {
  const { prices } = this.state;
    return (
     
               
       

{prices}

     
    )  } }

父组件

import React, { Component } from 'react';
import Item from './Item'

class App extends Component {
 constructor(props) {
  super(props)

  this.state = {price: 0}
 }
 
 //给子组件用来传price用的方法
 changePrice(price){
  this.setState({price: price})
 }

 render() {
  return (
   
         

{this.state.price}

   
  );  } } export default App;

关于使用react怎么在父组件与子组件之间值传递就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站名称:使用react怎么在父组件与子组件之间值传递-创新互联
分享路径:http://azwzsj.com/article/ejeph.html

其他资讯