子组件不呈现

Question

我不能为我的生活解决为什么我的组件根本不在页面中呈现，以及它呈现为<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输出

Answer 1

React组件名称应该大写 - 所以只需将组件名称从signInForm更改为SignInForm。请查看反应doc以获取更多详细信息。