Компонент PrivateRouter в React

Я использую компонент функции частного маршрутизатора и хочу преобразовать его в компонент класса.

Моя цель - получить доступ к 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

Вам не нужен this.props в качестве аргумента в функции renderView. this.props можно использовать так, как он внутри.

Anshul Bansal 20.05.2019 21:59
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
52
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Расширяя то, что @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);

Другие вопросы по теме