如何将道具从孩子拉到父母身边?

时间:2017-03-01 02:14:04

标签: reactjs redux

我试图将一个prop值(props.createForm.pro.value)从子反应组件(createForm)拉到父(const app),以便切换样式。

我在控制台中收到此错误:"无法读取属性' pro'未定义"

这是我在App.js中的内容

import React, {PropTypes}   from 'react';
import {Row, Col}           from 'react-bootstrap';

import SocialLogin from '../../react/containers/investability/member/components/form/SocialLogin/SocialLogin';

/*
 *  App Container
 *  login_page
 */

const App = (props) => {

    let showSocial = (props.createForm.pro.value) ? 'login-modal-social' : 'login-modal-social hidden';
    let showOr = (props.createForm.pro.value) ? 'login-modal-or' : 'login-modal-or hidden';
    let setStylePro = (props.createForm.pro.value) ? 'login-modal-form' : 'login-modal-form login-modal-form-set-style-pro';

    return (
        <div className="container-fluid">

            <div className="login-modal-wrapper">

                <Row className="login-modal-content">

                    <Col md={5} className={setStylePro}>
                    {/*<Col md={5} className='login-modal-social'>*/}
                        {props.children}
                    </Col>

                    <Col md={2} className={showOr}>
                    {/*<Col md={2} className='login-modal-or'>*/}

                        <div>or</div><hr/>
                    </Col>

                    <Col md={5} className={showSocial}>
                    {/*<Col md={5} className='login-modal-form'>*/}
                        <SocialLogin {...props} />
                    </Col>

                </Row>

            </div>

        </div>
    );
};

App.propTypes = {
    children: PropTypes.element
};

export default App;
在子组件中的

我有这个div:

                        <CheckboxInput
                                checked={this.props.form.pro.value}
                                className="form control"
                                help_default={this.props.form.pro.help_default}
                                help_error={this.props.form.pro.help_error}
                                help_success={this.props.form.pro.help_success}
                                label={<span className="form-checkbox-text">
                                {proCreateFormVisible} I am a real estate professional
                                    </span>}
                                name={this.props.form.pro.name}
                                onChange={this.props.onChange}
                                required={false}
                                validationState={null}
                                value={this.props.form.pro.value}
                            />

0 个答案:

没有答案