即使在脚本上使用 text/babel 时，意外的标记 '<'答案

【问题标题】：Unexpected token '<' even when text/babel is used on script即使在脚本上使用 text/babel 时，意外的标记 '<'
【发布时间】：2020-11-02 10:58:13
【问题描述】：

我正在尝试使用完全有效的 JSX 在 React 中呈现一个按钮（至少，据我观察 20 分钟后的判断）。但由于某种原因，我不断收到语法错误：

第 18 行出现意外的标记“

考虑到当我加载脚本时我都使用 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中断。

我以前从未遇到过这个问题，因此感谢所有帮助，干杯。

【问题讨论】：

按钮是一个函数而不是一个组件，尝试{this.button()}而不是<this.Button />来执行这个函数。
@theblackgigant <this.Button /> 是一个匿名功能组件，在我的所有其他脚本中呈现正常。还应该补充一点，改变它不会消除我的错误。 :-(
尝试重复简单的例子stackoverflow.com/questions/53972473/…
不要按照建议执行this.Button()，您必须使用createElement 才能将其注册到 React 树。

标签： javascript html reactjs

【解决方案1】：

您没有附加 React 脚本，请参阅 how to create React app。

因为 JSX 是 syntatic sugar for 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。

【讨论】：

很遗憾，什么也没做。
再次像我在您之前的问题中提到的那样，您在沙箱中是否有可重现的示例？ codesandbox，“什么也没做”是什么意思，同样的错误（不太可能）？屏幕上什么都没有出现？ How to create a Minimal, Reproducible Example
没有做任何事情，一般来说，没有任何改变。所以是的，我仍然遇到同样的错误。
我认为你没有安装 babel 的 JSX。 reactjs.org/docs/cdn-links.html, reactjs.org/docs/…