你好,我现在开始 react ,我有点困惑,我正在使用路由/私有(private)路由,所以我创建了一个组件文件夹,其中将包含我的登录组件和我的登录/index.js我导入此组件的文件夹,但我毫无疑问有什么更好的方法来做到这一点:
我的app.js:
import React, { Component } from 'react';
import './App.css';
import Routes from './routes';
function App() {
return (
<Routes/>
);
}
export default App;
我的路线js:
export default function Routes(){
return(
<BrowserRouter>
<Switch>
<Route path="/" exact component = {Login}/> //só chama rota se o caminho for exato;
<PrivateRoute path="/home" component = {DashBoard}/>
</Switch>
</BrowserRouter>
);
}
我的组件/登录表单:
import React, { Component } from 'react';
class LoginForm extends Component {
constructor(props){
super(props);
this.state = {
login:'',
password:'',
errors: {},
isLoading: false
};
this.onSubmit = this.onSubmit.bind(this);
this.onChange = this.onSubmit.bind(this);
}
onSubmit(e){
e.preventDefault();
}
onChange(e){
this.state({[e.target.name]: e.target.value});
}
render() {
const { errors, login, password, isLoading } = this.state;
return (
<form onSubmit={this.onSubmit}>
<label for="login">Login</label>
<input type="text" id="login" value={login} error= {errors.login} onChange={this.onChange} placeholder="Informe seu login" />
<label for="password">Senha</label>
<input type="password" id="password" value={password} error= {errors.password} onChange={this.onChange} placeholder="Informe sua senha"/>
<button className="btnEnt" type="submit" disabled ={isLoading}>Entrar</button>
</form>
)
}
}
export default LoginForm;
现在我有疑问,因为我将从登录页面调用我的 index.js 文件中的登录组件
index.js
import React, { Component } from 'react';
import loginComp from '../../components/LoginForm';
class Login extends Component {
render() {
return (
<loginComp />
)
}
}
export default Login;
我没有错误,但它没有在屏幕上呈现任何内容
最佳答案
自 <loginComp/>
不是您在 LoginPage 中创建的组件,它不会呈现数据。您只需更改
import loginComp from '../../components/LoginForm';
to import LoginForm from '../../components/LoginForm';
记住/components/LoginForm 这是您保存的文件名,而不是您创建的组件。
render() {
return (
<LoginForm/>
)
}
关于javascript - React js 组件渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59057583/