Я использую компонент функции частного маршрутизатора и хочу преобразовать его в компонент класса.
Моя цель - получить доступ к Home со всеми его параметрами с помощью этого маршрута:
<PrivateRouteComponent path = "/home" component = {Home} />
и вот мой компонент класса:
class PrivateRouteComponent extends Component{
constructor(props) {
super(props);
}
render() {
let renderView = (this.props) => ( // <-- Shows an error for this
FakeServer.isUserAuthenticated() == true // Dummy mockup server
? <Component {...this.props} />
: <Redirect to='/login' />
)
return (
<Route {...rest} render = {renderView} />
)
}
}
Я вижу ошибку для строки определения строки renderView, говоря:
Parsing error: Invalid left-hand side in arrow function parameters
Расширяя то, что @AnshulBansal сказал в комментариях, вы объявляете renderView
как функцию, но используете this.props
как параметр функции, и это неправильно.
let renderView = (this.props) => (
^^^^^^^^^^
Вы определяете параметр функции как значение свойства вашего класса (это мое лучшее объяснение этого, я знаю, что оно не самое лучшее)
Глядя на то, что делает renderView
, кажется, что вам действительно не нужны никакие параметры для функции:
let renderView = () => (
FakeServer.isUserAuthenticated() == true
? <Component {...this.props} />
: <Redirect to='/login' />
)
Если вам нужно, чтобы функция имела параметр, вы должны сделать что-то вроде:
let renderView = (props) => {
// do something
}
// ...
renderView(this.props)
Кроме того, вы также можете иметь параметры по умолчанию
let renderView = (props = this.props) => {
// do something
}
ОК, я решил проблему, добавив функции mapStateToProps, mapDispatchToProps и упростив рендеринг...
class PrivateRouteComponent extends Component{
constructor(props) {
super(props);
}
componentDidMount() {
let userObj = FakeServer.getAuthenticatedUser()
this.props.getUserByUsername(userObj.user.username) // Mapped by connect()
}
render() {
return (
this.props.loading ? 'Loading in router' :
<Route {...this.props} render = {(props) => (
FakeServer.isUserAuthenticated() == true
? <Component {...props} />
: <Redirect to='/login' />
)} />
)
}
}
/*
mapStateToProps
Function to relate reducer results with props:
*/
const mapStateToProps = state => ({
user: state.userReducer.user,
loading: state.userReducer.loading
});
/*
mapDispatchToProps
Function to map dispatcher trigger functions as pros:
*/
function mapDispatchToProps(dispatch){
return {
getUserByUsername : (username) => {dispatch(userActions.getUserByUsername(username))}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(PrivateRouteComponent);
Вам не нужен
this.props
в качестве аргумента в функции renderView. this.props можно использовать так, как он внутри.