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('參數') ，子組件去觸發父組件的函數，