子组件不渲染
Child component not rendering
我这辈子都弄不明白为什么我的组件根本不在页面中呈现,以及它呈现为 <signinform></signinform>
的原因。我正在使用 react-form
,但我认为这与渲染无关。
signin.js
import React from 'react';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom'
import {BlockForLoggedInUsers} from '../shared/auth/userRedirects'
import Logo from '../shared/logo';
import userStyles from '../shared/userPages/userPages.css';
import showResults from './showResults';
import signInForm from './signInForm';
class SignIn extends React.Component {
constructor(props) {
super(props);
}
render(){
return (
<div className={userStyles.home}>
<BlockForLoggedInUsers />
<Logo />
<signInForm onSubmit={showResults}/>
<div className={userStyles.extraDetails}>
<NavLink to="/signup">Don't have an account yet?</NavLink>
<NavLink to="/skip" className={userStyles.extraDetailsRight}>Skip</NavLink>
</div>
</div>
);
}
}
function mapStateToProps(state) {
return { user: state.user };
}
export default connect(mapStateToProps)(SignIn);
signInForm.js
import React from 'react';
import { Field, reduxForm } from 'redux-form';
const signInForm = props => {
const { handleSubmit, pristine, submitting } = props;
return (
<div>
<form role="form" onSubmit={handleSubmit}>
<Field name="email" component="input" type="text" placeholder="Enter email address"/>
<button type="submit" disabled={pristine || submitting}>Sign In</button>
</form>
</div>
);
};
export default reduxForm({
form: 'signInForm',
})(signInForm);
HTML输出
React 组件名称应该大写 - 所以只需将组件名称从 signInForm
更改为 SignInForm
。请查看 react doc 了解更多详情。
我这辈子都弄不明白为什么我的组件根本不在页面中呈现,以及它呈现为 <signinform></signinform>
的原因。我正在使用 react-form
,但我认为这与渲染无关。
signin.js
import React from 'react';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom'
import {BlockForLoggedInUsers} from '../shared/auth/userRedirects'
import Logo from '../shared/logo';
import userStyles from '../shared/userPages/userPages.css';
import showResults from './showResults';
import signInForm from './signInForm';
class SignIn extends React.Component {
constructor(props) {
super(props);
}
render(){
return (
<div className={userStyles.home}>
<BlockForLoggedInUsers />
<Logo />
<signInForm onSubmit={showResults}/>
<div className={userStyles.extraDetails}>
<NavLink to="/signup">Don't have an account yet?</NavLink>
<NavLink to="/skip" className={userStyles.extraDetailsRight}>Skip</NavLink>
</div>
</div>
);
}
}
function mapStateToProps(state) {
return { user: state.user };
}
export default connect(mapStateToProps)(SignIn);
signInForm.js
import React from 'react';
import { Field, reduxForm } from 'redux-form';
const signInForm = props => {
const { handleSubmit, pristine, submitting } = props;
return (
<div>
<form role="form" onSubmit={handleSubmit}>
<Field name="email" component="input" type="text" placeholder="Enter email address"/>
<button type="submit" disabled={pristine || submitting}>Sign In</button>
</form>
</div>
);
};
export default reduxForm({
form: 'signInForm',
})(signInForm);
HTML输出
React 组件名称应该大写 - 所以只需将组件名称从 signInForm
更改为 SignInForm
。请查看 react doc 了解更多详情。