![](/img/trans.png)
[英]In React Native App, I Got the Error: Element type is invalid: expected a string (for built-in components) ... Check the render method of `App`?
[英]Element type is invalid: expected a string (for built-in components) … Check the render method of `App`
元素類型無效:期望一個字符串(對於內置組件)或一個類/函數(對於復合組件)但得到:undefined。 您可能忘記從其定義的文件中導出組件,或者您可能混淆了默認導入和命名導入。
檢查App
的渲染方法。
index.js
import ReactDOM from 'react-dom';
import { makeMainRoutes } from './routes';
const routes = makeMainRoutes();
ReactDOM.render(
routes,
document.getElementById('root')
);
routes.js
import React from 'react';
import { Route, Router } from 'react-router-dom';
import App from './App';
import Home from './Home/Home';
import Callback from './Callback/Callback';
import Auth from './Auth/Auth';
import history from './history';
const auth = new Auth();
const handleAuthentication = (nextState, replace) => {
if (/access_token|id_token|error/.test(nextState.location.hash)) {
auth.handleAuthentication();
}
}
export const makeMainRoutes = () => {
return (
<Router history={history} component={App}>
<div>
<Route path="/" render={(props) => <App auth={auth} {...props} />} />
<Route path="/home" render={(props) => <Home auth={auth} {...props} />} />
<Route path="/callback" render={(props) => {
handleAuthentication(props);
return <Callback {...props} />
}}/>
</div>
</Router>
);
}
App.js
import React, { Component } from 'react';
import { Navbar, Button } from 'react-bootstrap';
import './App.css';
class App extends Component {
goTo(route) {
this.props.history.replace(`/${route}`)
}
login() {
this.props.auth.login();
}
logout() {
this.props.auth.logout();
}
componentDidMount() {
const { renewSession } = this.props.auth;
if (localStorage.getItem('isLoggedIn') === 'true') {
renewSession();
}
}
render() {
const { isAuthenticated } = this.props.auth;
return (
<div>
{/* <script type="text/javascript" src="node_modules/auth0-js/build/auth0.js"></script> */}
{/* <script src="https://cdn.auth0.com/js/auth0/9.10/auth0.min.js"></script> */}
<Navbar fluid>
<Navbar.Header>
<Navbar.Brand>
<a href="#">Auth0 - React</a>
</Navbar.Brand>
<Button
bsStyle="primary"
className="btn-margin"
onClick={this.goTo.bind(this, 'home')}
>
Home
</Button>
{
!isAuthenticated() && (
<Button
id="qsLoginBtn"
bsStyle="primary"
className="btn-margin"
onClick={this.login.bind(this)}
>
Log In
</Button>
)
}
{
isAuthenticated() && (
<Button
id="qsLogoutBtn"
bsStyle="primary"
className="btn-margin"
onClick={this.logout.bind(this)}
>
Log Out
</Button>
)
}
</Navbar.Header>
</Navbar>
</div>
);
}
}
export default App;
undefined && whatever
解析為undefined
。 檢查this.props.auth.isAuthenticated()
返回的值。 它應該是布爾值。 你可以用!!
解決問題:
{
!!isAuthenticated() && (
<Button
id="qsLogoutBtn"
bsStyle="primary"
className="btn-margin"
onClick={this.logout.bind(this)}
>
Log Out
</Button>
)
}
但是,由於您必須使用此條件的替代方法,因此最好只使用此代碼:
{
isAuthenticated() ? (
<Button
id="qsLogoutBtn"
bsStyle="primary"
className="btn-margin"
onClick={this.logout.bind(this)}
>
Log Out
</Button>
) : (
<Button
id="qsLoginBtn"
bsStyle="primary"
className="btn-margin"
onClick={this.login.bind(this)}
>
Log In
</Button>
)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.