React学习：组件之间的关系、参数传递-学习笔记

最新推荐文章于 2024-08-12 00:30:00 发布
最新推荐文章于 2024-08-12 00:30:00 发布
阅读量116 收藏
点赞数
分类专栏： 前端学习 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhhmonkey/article/details/119208828
版权

文章目录

React学习：组件之间的关系、参数传递-学习笔记

父到子传递参数

<!DOCTYPE html>
<html>
  <head>
    <title>组件传参（父-子）1</title>
    <meta charset="UTF-8" />
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/babel">
    //父组件
    class ParentList extends React.Component {
      constructor() {
        super();
        this.state = {
          name:'老张' ,
          msg:'我是爸爸'
        }; 
      }
      
      render() {
        let {name,msg} = this.state;
        return (
          <div>
            <h1>我是父组件</h1>
            <div>姓名：{name}</div>
            <div>描述：{msg}</div>
            <ChildList  {...this.state} />
          </div>
          )
      }
    };
    //子组件
    class ChildList extends React.Component {
      constructor(props) {    
        super();   
        this.state = {
          name:'child',
          msg:props.msg
        }; 
      }
      render() {
        let {name} = this.state;
        return (
          <div>
              <h1>我是子组件</h1>
              <div>子的姓名：{name}</div>
              <div>爸爸的姓名：{this.props.name}-{this.props.msg}</div>
          </div>
          )
      }
    };

    ReactDOM.render(
      <ParentList  />,
      document.getElementById('example')
    );
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>组件传参（父-子）2</title>
    <meta charset="UTF-8" />
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/babel">
    //父组件
    class ParentList extends React.Component {
      constructor() {
        super();
        this.state = {
          name:'老张' ,
          msg:'我是爸爸'
        }; 
      }
      handleChange(e){
        this.setState({
          name:e.target.value
        })
      }
      handleParent(data){
        this.setState({
          name:data
        })
      }
      render() {
        let {name,msg} = this.state;
        return (
          <div>
            <h1>我是父组件</h1>
            <div>姓名：{name}</div> 
            <div>描述：{msg}</div>
            <input type="text" value={name} onChange={(event)=>this.handleChange(event)} />
            <ChildList  {...this.state} handleParent={this.handleParent.bind(this)}/>
          </div>
          )
      }
    };
    //子组件
    class ChildList extends React.Component {
      constructor(props) {    
        super();   
        this.state = {
          name:'child',
          parentName:props.name
        }; 
      }
      handleChange(e){
        //this.props.name = '11111'  //不能直接修改父
        this.setState({
          parentName:e.target.value
        });
        this.props.handleParent(e.target.value);

      }
      render() {
        let {name,parentName} = this.state;
        return (
          <div>
              <h1>我是子组件</h1>
              <div>子的姓名：{name}</div>
              <div>爸爸的姓名：{this.props.name}-{this.props.msg}</div>
              <input type="text" value={parentName} onChange={(event)=>this.handleChange(event)} />
          </div>
          )
      }
    };

    ReactDOM.render(
      <ParentList  />,
      document.getElementById('example')
    );
    </script>
  </body>
</html>

子-父

<!DOCTYPE html>
<html>
  <head>
    <title>组件传参（子-父）</title>
    <meta charset="UTF-8" />
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/babel">
    //父组件
    class ParentList extends React.Component {
      constructor() {
        super();
        this.state = {
          checked:true
        }; 
      }
      change(data,f1){
        console.log(data);
        f1();
        this.setState({
          checked:data
        })
      }
      render() {
        let {checked} = this.state;
        var isCheck = checked?'yes':'no';
        return (
          <div>
            <h1>我是父组件:{isCheck}</h1>
            <ChildList check={checked} parentChange={this.change.bind(this)}/>
          </div>
          )
      }
    };
    //子组件
    class ChildList extends React.Component {
      constructor(props) {    
        super();   
        this.state = {
          checked:props.check
        }; 
      }
      change(){
        var s = !this.state.checked;
        this.setState({
          checked:s
        });
        this.props.parentChange(s,this.f1);
      }
      f1(){
        console.log('f1f1f1')
      }
      render() {
        let {name} = this.state;
        return (
          <div>
              <div>我是子组件:
                {/*<input type='checkbox' 
                    checked={this.props.check}
                    onChange={()=>this.props.parentChange(false)}
              />*/}
              <input type='checkbox' 
                    checked={this.state.checked}
                    onChange={()=>this.change()}
                  />
              </div>
              
          </div>
          )
      }
    };

    ReactDOM.render(
      <ParentList  />,
      document.getElementById('example')
    );
    </script>
  </body>
</html>

父-孙

<!DOCTYPE html>
<html>
  <head>
    <title>组件传参（父-孙）</title>
    <meta charset="UTF-8" />
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/babel">
    //父组件
    class ParentList extends React.Component {
      constructor() {
        super();
        this.state = {
          color:'red'
        }; 
      }
      handleSelect(e){
        this.setState({
          color:e.target.value
        })
      }
      render() {
        var colorArr =['red','blue','green'];
        var {color} = this.state;
        return (
          <div>
            <select value={color} onChange={(event)=>this.handleSelect(event)}>
              {
                colorArr.map((item,index)=>{
                  return <option key={index}>{item}</option>
                })
              }
            </select>
            {
              this.props.data.map((item,i)=>{
                return <InputList key={i} obj={item} color2={color}  />
              })
            }
          </div>
          )
      }
    };
    //子组件
    class InputList extends React.Component {
      constructor(props) {    
        super();   
        this.state = {
        }; 
      }
      render() {
        return (
          <div>
              <input type='text' value={this.props.obj.value}/>
              <BtnList  color={this.props.color2} title={this.props.obj.title} />
          </div>
          )
      }
    };
     //子组件
     class BtnList extends React.Component {
      constructor(props) {    
        super();   
        this.state = {
        }; 
      }
      render() {
        return <button style={{'color':this.props.color}}>{this.props.title}</button>
      }
    };

    ReactDOM.render(
      <ParentList  data={[{id:1,title:'提交',value:'aaa'},{id:2,title:'编辑',value:'qqq'},{id:3,title:'删除',value:'www'}]}/>,
      document.getElementById('example')
    );
    </script>
  </body>
</html>

兄弟组件传参

<!DOCTYPE html>
<html>
  <head>
    <title>组件传参</title>
    <meta charset="UTF-8" />
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/babel">
    //父组件
    class ParentList extends React.Component {
      constructor() {
        super();
        this.state = {
          data:'12345'
        }; 
      }
      change(childA){
        this.setState({
          data:childA
        })
      }
      render() {
        let {data} = this.state;
        return (
          <div>
            <ChildListA change={this.change.bind(this)}/>
            <ChildListB {...this.state}/>
          </div>
          )
      }
    };
    //子组件
    class ChildListA extends React.Component {
      constructor(props) {    
        super();   
        this.state = {
          name:'AAAA'
        }; 
      }
      render() {
        return (
          <div>
              <div>我是子组件A:
                <button onClick={()=>this.props.change(this.state.name)}>按钮A</button>
              </div>
          </div>
          )
      }
    };
    class ChildListB extends React.Component {
      render() {
        return (
          <div>
              <div>我是子组件B:{this.props.data}</div> 
          </div>
          )
      }
    };

    ReactDOM.render(
      <ParentList  />,
      document.getElementById('example')
    );
    </script>
  </body>
</html>
monkeyhlj
关注
专栏目录
React 学习笔记
飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘
02-19 1530
文章目录React 学习笔记安装基础概念变量 css列表组件事件处理事件对象state表单处理一个实现评论的案例高阶概念props传递数据函数传递数据constructorprops childrenprops校验props校验组件通信父传子子传父兄弟组件通讯Context各种细节setState() 异步更新数据setState() 二次调用setState() 同步JSX 语法的转化过程组件更新机制组件性能优化虚拟DOM 和 Diff算法v6 路由 React 学习笔记 学习课程来自黑马程序员 安装
react-field-mapping:基于React的表格映射关系组件
05-09
react-field-mapping 关系映射组件 View the and its for more. 使用中需要注意的一点是relation，是由组件内部控制的，所以是不受控的，连线后组件内部relation改变，连线也是组件内部控制。但是外部传入的relation是可以改变内部的relation，在组件内会监听传入的relation，可以在onChange的时候改变传入的relation，来达到受控的效果，如果onChange的时候不改变传入的relation，那么relation就是defaultRelation的效果。 API FieldMapping 参数 说明 类型 默认值 className 自定义class string "" style 自定义style object {} source data 源表数据（受控） array [] columns 表格列的配置描
【React】基于Echarts实现关系图(图谱&graph)
无限循环
03-12 1963
echarts实践关系图(graph)及固定节点实战样例笔记
一个关系数据展示组件，支持Vue 2、Vue 3和React，轻松实现单据关联、组织架构和人物关系图形展示
最新发布
m0_68103752的博客
08-12 1096
作为一个功能强大、灵活易用的关系数据展示组件，极大地简化了图形应用的开发过程。它不仅提高了开发效率，还使得用户能够以直观的方式理解和操作复杂的数据。
react 组件关系梳理
Yangtzem的博客
01-16 790
最近在做一个增删改查的类后台管理系统，页面结构和交互比较复杂，权限也有多种。开发周期只有3周，时间是很紧迫的。 项目背景介绍：一个基于网红关于某些品牌活动的帖子分析系统，一个页面Campaign Performance 无数据状态： Campaign Performance页涉及功能模块： 1）活动筛选 2）活动创建、编辑、删除 3）帖子基本信息创建、编辑、删除 4）帖子数据输入...
转载 React.createClass 对决 extends React.Component
weixin_34096182的博客
01-18 182
先给出结论，这其实是殊途同归的两种方式。过去我们一般都会使用React.createClass方法来创建组件，但基于 ES6 的小小语法糖，我们还可以通过extends React.Component来创建组件。 这两种创建方式之间的差别很小，但只有了解这些颇有趣味的区别之后，我们才能做出最适合自己的选择。 语法区别 首先，让我们通过两个代码片段和相应的解释来看看到底有哪些语法区别。...
学习笔记：Vue任意组件间通信----消息订阅与发布
weixin_58257357的博客
03-23 909
目录 一. 因为消息订阅发布不是原生js和Vue自带的，所以需要下载第三方库 二 引入pubsub-js 三 订阅消息 四 发布消息 五 取消订阅（解绑） 六 总结 一. 因为消息订阅发布不是原生js和Vue自带的，所以需要下载第三方库 通过 npm 安装 （npm install pubsub-js) 通过CDN使用：pubsub-js CDN by jsDelivr - A CDN for npm and GitHub 二 引入pubsub-js impo...
react笔记：组件
weixin_45844109的博客
07-18 331
react组件以及相关内容。
bootcamp-react:训练营React学习笔记
03-19
在React训练营的学习笔记中，我们深入探讨了React——一个由Facebook开发并维护的JavaScript库，用于构建用户界面，特别是单页应用。React以其组件化、声明式编程风格和高效的虚拟DOM更新机制著称，是现代Web开发的...
React学习笔记四(redux和react-redux和Redux Toolkit)
kianagrow的博客
12-18 916
React学习笔记四(redux和react-redux和Redux Toolkit)
React【事件对象、组件关系（组件的props、子组件向父组件传递数据 ）、组件组合（组件状态State、State的更新、setState重新渲染组件跟子组件、基于props初始化）】(二)
09-01 644
React【事件对象、组件关系（组件的props、子组件向父组件传递数据 ）、组件组合（组件状态State、State的更新、setState重新渲染组件跟子组件、基于props初始化）】(二)
React 组件高级 组件之间的关系
qq_45715615的博客
02-25 149
1.组件通讯介绍 组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程串，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。 2.组件的props 组件是封闭的，要接收外部数据应该通过props来实现 props的作用:接收传递给组件的数据 传递数据∶给组件标签添加属性 接收数据︰函数组件通过参数props接收数据，类组件通过th
在React中使用extends React.Component定义的组件
Stan的专栏
11-22 7776
在《React 快速上手开发》的第二章，组件的生命周期，创建组件的API是这么写的：var MyComponent = React.createClass({ render:function(){ return (<h1> hello world </h1>) } }); ReactDOM.render( React.createElement(MyCompo
React.createClass 和 extends React.Component
cao_dan的博客
08-01 2659
常用extends React.Component ，以下是一些二者区别： 1.初始化state时候的区别  用createClass创建的组件需要使用函数getInitialState()函数如： import React from 'react'; const Person= React.createClass({ getInitialState () { return ...
React学习笔记之六：组件间的参数传递
qq_24724109的博客
07-03 207
6. 组件间传参 父组件向子组件传参 子组件向父组件传参 0. 上一波目前为止的App.js文件中我们的组件代码！ 我们来回顾下之前我们做了啥，目前为止完整的代码： import React, { Component } from 'react'; import './App.css'; class Header extends Component { render() { re...
React.createClass和extends Component的区别
weixin_34095889的博客
07-03 195
createClass本质上是一个工厂函数，extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。createClass方式的方法定义使用逗号,隔开，因为creatClass本质上是一个函数，传递给它的是一个Object；而class的方式定义方法时务必谨记不要使用逗号...
初学react（二）：组件与组件间的参数传递
qq_37942845的博客
05-14 228
a. 在src里新建Persion目录，并新建Persion.js 文件 Persion.js //必须引入react，来识别JSX语法 import React from 'react'; //定义一个组件，并用形参接受父组件传过来的参数,可以自己定义 const person = ( props ) => { return ( <div> ...
React进阶——高阶组件基本概念、使用场景、参数传递、继承实现
sxww_zyt的博客
10-27 1503
withPersistentData是一个高阶组件，返回一个新的组件，在新组件的componentWillMount中统一处理data，然后将获取到的数据。前面介绍的高阶组件的实现方式都是由高阶组件处理通用逻辑，然后将相关属性传递给被包装组件，我们称这种实现方式为。HOC(...params)的返回值是一个高阶组件，高阶组件需要的参数是先传递给HOC函数的。继承方式实现的高阶组件对被包装组件具有侵入性，当组合多个高阶组件使用时，很容易因为子类组件忘记通过。实现高阶组件：通过继承被包装组件实现逻辑的复用。
React学习笔记：状态提升、受控/非受控组件与组件通信
本篇JS-React个人学习笔记旨在分享作者对React框架的理解和实践经验，主要包括以下几个关键知识点： 1. **状态提升（State Management）** 子组件与父组件之间的状态传递有两种方式： - 子传父：在子组件中定义一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值