无法在反应中呈现另一个类组件内的类组件

Posted 2023-02-23

【中文标题】无法在反应中呈现另一个类组件内的类组件

【英文标题】：Cannot render a class component inside another class component in react

【发布时间】：2017-08-20 22:12:19

【问题描述】：

我正在尝试在我的登录页面中呈现此登录表单，但我收到“登录表单未定义”。我不能将一个类组件渲染到另一个类组件中，还是某些状态造成了冲突，或者我没有看到错字？

此外，这样做的正确方法是什么？

文件夹树：SignIn(index.js, actions.js, LoginForm.js)

---

LoginForm.js：

import React from 'react';
import styled from 'styled-components';
import  login  from './actions';
import  connect  from 'react-redux';

import validateInput from '../../../server/middlewares/routes/shared/validation/loginvalidation';

const Form = styled.form`
    position: absolute;
    left: 40%;
    top: 20%;
`;

const Input = styled.input`
    border-bottom: 2px solid red;
    background-color: transparent;
`;

const Button = styled.button`
    background-color: red;
    width: 100px;
    height: 50px;
`;

class LoginForm extends React.Component 
    constructor(props) 
        super(props);
        this.state = 
            identifier: '',
            password: '',
            errors: ,
            isLoading: false
        ;

        this.onSubmit = this.onSubmit.bind(this);
        this.onChange = this.onChange.bind(this);
    

    isValid() 
        const  errors, isValid  = validateInput(this.state);

        if (!isValid) 
            this.setState( errors );
        

        return isValid;
    

    onSumit(e) 
        e.preventDefault();
        if (this.isValid()) 
            this.setState( errors: , isLoading: true );
            this.props.login(this.state).then(
                (res) => this.context.router.push('/'),
                (err) => this.setState( errors: err.data.errors, isLoading: false )
            );
        
    

    onChange(e) 
        this.setState( [e.target.name]: e.target.value );
    

    render() 
        const  errors, identifier, password, isLoading  = this.state;

        return (
            <Form onSubmit=this.onSubmit>
                <h1> Login </h1>

                <Input
                  field="identifier"
                  label="Username / Email"
                  value=identifier
                  error=errors.indentifier
                  onChange=this.onChange
                />

                 <Input
                  field="password"
                  label="Password"
                  value=password
                  error=errors.password
                  onChange=this.onChange
                  type="password"
                />

                <Button disabled=isLoading> LOGIN </Button>

            </Form>
        )
    


// LoginForm.propTypes = 
//     login: React.PropTypes.func.isRequired
// 

// LoginForm.contextTypes = 
//     router: React.PropTypes.object.isRequired
// 

// export default connect(null,  login )(LoginForm);

export default LoginForm;

---

index.js：

import React from 'react';
import styled from 'styled-components';
import  connect  from 'react-redux';

import LoginForm from './LoginForm';

const FormWrapper = styled.div`
    position: absolute;
    left: 40%;
    top: 30%;
    height: 400px;
    width: 400px;
    background-color: red;
`;

class LoginPage extends React.Component 
  render() 
    return (
      <div>
        <h1>weEWRWER</h1>
      <FormWrapper>
         <LoginForm />
      </FormWrapper>
      </div>
    )
  


export default LoginPage;

【参考方案1】：

这只是一个错字 onSumit -> onSubmit 在第 49 行的 LoginForm 中