Неожиданный токен '<', даже если в скрипте используется текст / babel - PullRequest
Новая
       6

Неожиданный токен '<', даже если в скрипте используется текст / babel

1 голос
/ 13 июля 2020

Я пытаюсь отобразить кнопку в React , используя совершенно правильный JSX (по крайней мере, насколько я могу судить после просмотра в течение 20 минут). Но по какой-то причине я продолжаю получать синтаксическую ошибку:

Неожиданный токен '<' в строке 18 </p>

Это становится сюрпризом для меня, учитывая, когда я загружаю скрипт Я использую атрибут типа text/babel, и сценарий babel загружается в <head>, а этот загружается в DOM.

Вот что у меня HTML выглядит так: 

<head>
    <!-- react, react-dom, axios etc. go here !-->
    <script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <!-- notice that i'm using babel !-->
    <script type="text/babel" src="cdn/static/scripts/module/user.js">
</body>

А вот мой JavaScript: 

class User extends Component{
    constructor(props){
        super();
        this.user = props.user;
        this.state = {
            modalOpen: false
        };
    }

    Button = () => {
        let user = this.user;
        //     vvvv this is what the error points to
        return <button className={(user.loggedIn ? "user" : "sign-in")}>{(user.loggedIn ? user.public.display : "Sign In")}</button>;            
    }

    render(){
        return (
            <div className="button">
                <this.Button />
            </div>
        );
    }
}

ReactDOM.render(<User user={window.User} />, document.getElementById("content"));

Что еще более странно, так это то, что он фактически отображает button, но из-за ошибки это также приведет к поломке остальной части моего JavaScript.

Я никогда раньше не сталкивался с этой проблемой, так что вся помощь приветствуется, ура.

1 Ответ

0 голосов
/ 13 июля 2020

У вас нет прикрепленных скриптов React, см. как создать приложение React .

Потому что JSX - это syntati c sugar для React.createElement, и пользовательские компоненты должны быть в верхнем регистре, вы должны визуализировать Button следующим образом: 

class User extends Component{
    constructor(props){
        super();
        this.user = props.user;
        this.state = { modalOpen: false };
    }

    Button = () => {
        let user = this.user;
        return (
            <button className={user.loggedIn ? "user" : "sign-in"}>
                {user.loggedIn ? user.public.display : "Sign In"}
            </button>
        );
    }

    render(){
        const Button = this.Button;
        return (
            <div className="button">
                <Button />
            </div>
        );
    }
}

Или вызывать React.createElement напрямую: 

<div className="button">
 {React.createElement(this.Button, null)}
</div>

См. JSX in Depth .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...