React 组件开发传参（详解）。

案例地址：http://cyclv.gitee.io/react-admin/#/rolelist

组件关系：如图：

画的不怎好看，

父子组件传参，可以通过 props

父向子传递参数

role.js

import React, { Component } from 'react'
import '../css/bases.css'
import MyTable from '../../component/myTable';
import MyForm from '../../component/myForm';
class RoleList extends Component {constructor(props) {super(props);this.state = {selectUrl: 'api.sysRoleList',/* tableInfo  */tableInfo: {delectUrl: '1111111111',search:{searchUrl: 'api.tPipeDeviceList',info: [{ label: '角色名称', type: 'input', key: 'roleName' },]},btn: [{ label: '新增', key: 'listId', type: 'add' },{ label: '批量刪除', key: 'listId', type: 'rowDelect' }],tableEdit:false,columns: [{ title: '角色名称', dataIndex: 'roleName', align: 'center' },{ title: '', dataIndex: 'createTime', align: 'center' },{ title: '', dataIndex: 'createUser', align: 'center' },{ title: '机构ID', dataIndex: 'orgId', align: 'center' },]}}}/* myTable back */tableBack = (type, info) => {this.setState({formInfo: Object.assign({}, this.state.formInfo, { visible: true, info:{}})})}render() {return (<div><MyTable info={this.state.tableInfo} tableBack={this.tableBack}></MyTable></div>)}
}
export default RoleList;

引入组件，使用 import ，import MyTable from '组件地址';

使用组件，<MyTable formInfo={this.state.tableInfo} formUpdata={this.tableBack}></MyTable>

子组件接受参数，可以在自组件中console.log(this.props),可以看到参数

子组件向父组件传参，this.props.tableBack('参数') ，子组件去触发父组件的函数，

React 组件开发传参（详解）。相关推荐

Spring/Boot/Cloud系列知识：SpringMVC 传参详解（下）
(接上文<Spring/Boot/Cloud系列知识:SpringMVC 传参详解(上)>) 2.3.通过@PathVariable注解基于URL匹配符接收请求传参为了便于开发人员实现更 ...
Springboot传参详解
作者简介作者名:编程界明世隐简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
C#进阶系列——WebApi 接口参数不再困惑：传参详解
看这边文章时的疑惑是:WebApi中的参数加了[FromBody],不知所以然,就百度了下,看到了以下文章,和大家分享下: 原文链接:http://www.cnblogs.com/landeanfen ...
python可变参数_Python 的四种共享传参详解
点击上方"Python数据之道",选择"星标公众号" 精品文章,第一时间送达作者 | 杨仁聪编辑 | Lemon 出品 | Python数据之道本文来自公 ...
WebApi 接口参数不再困惑：传参详解
阅读目录一.get请求 1.基础类型参数 2.实体作为参数 3.数组作为参数 4."怪异"的get请求二.post请求 1.基础类型参数 2.实体作为参数 3.数组作为参数 4 ...
【转】C#进阶系列——WebApi 接口参数不再困惑：传参详解
阅读目录一.get请求 1.基础类型参数 2.实体作为参数 3.数组作为参数 4."怪异"的get请求二.post请求 1.基础类型参数 2.实体作为参数 3.数组作为参数 4 ...
微信小程序自定义组件子传父详解（多图）
微信小程序自定义组件子传父详解前言: 刚开始为了测试父传子,所以把页面的数组放在了父组件中 1. 然而子组件中绑定的自定义点击事件依然放在子组件的js文件中 2. 所以就会出现我们点击页面的文字能改 ...
Vue路由传参详解（params 与 query）
Vue路由传参详解(params 与 query) 前言: 路由传参分为 params 传参与 query 传参 params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显 ...
uboot引导kernel - 3 -uboot给内核传参详解
uboot中执行theKernel函数后,kernel正式启动.如下函数,我们发现有3个参数. 1. 参数 0: 2. 参数machid; 如下code 中获取machid, gd是个全局变量. 2. ...
C++11多线程第三篇：线程传参详解，detach()大坑，成员函数做线程参数
文章目录 3.1 传递临时对象作为线程参数 3.1.1 要避免的陷阱(解释1) 3.1.2 要避免的陷阱(解释2) 3.1.3 总结 3.2 临时对象作为线程参数进一步详解 3.2.1 线程id概念 ...

React 组件开发传参（详解）。

案例地址：http://cyclv.gitee.io/react-admin/#/rolelist

父向子传递参数

React 组件开发传参（详解）。相关推荐

最新文章

热门文章

React 组件开发 传参（详解）。

案例地址：http://cyclv.gitee.io/react-admin/#/rolelist

父向子传递参数

React 组件开发 传参（详解）。相关推荐

最新文章

热门文章

React 组件开发传参（详解）。

React 组件开发传参（详解）。相关推荐