子组件不渲染
问题描述:
我不能为我的生活找出为什么我的组件不在页面中渲染,而且它的渲染为<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);
答
反应的组分的名称应大写 - S o只需将组件名称从signInForm
更改为SignInForm
即可。请检查反应doc了解更多详情。
+1
宾果!简单正确的答案有:D –
+0
@JamieHutber,它是上述答案的副本,然后:) –
我认为这里的问题可以用这个答案解决https://*.com/questions/41216654/react-adding-component-after-ajax-to-view/41216726#41216726 –