我试图将一个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}
/>