reactjs - 从刀片到反应组件的复杂数据未显示

Question

我在名为 - login 的资源中有一个语言类。它有以下键。

return [
    "loginSuccessful"                             =>  "Login Successful",
    "invalidCredentials"                          =>  "These credentials do not match our records.",
    "inActiveAccount"                             =>  "Your account is not active. Please contact administrator.",
    "errorMessage_requiredUserNameOrEmailAddress" => "Please enter username or email address",
    "errorMessage_requiredPassword"               =>  "Please enter password",
];

我有一个带有以下代码的刀片，试图从刀片发送 json 数据以做出反应。

<div messages="{!! json_encode(Lang::get('Login')) !!}" id="login"></div>  

**下面是登录组件。** 在这里，我试图在身份验证方法中读取 json 数据，但只得到 {

import React from 'react';
import ReactDOM from 'react-dom';

class Login extends React.Component {
    authenticate() {
        var data = $("[id='login']").attr("messages");
        debugger;
    }
    
    render() {
        return (
            <div className="col-md-4">
                <input type="button" onClick={this.authenticate} value="Login" />
            </div>
        );
    }
    
}

export default Login;

if (document.getElementById('login')) {
    ReactDOM.render(<Login />, document.getElementById('login'));
}

我能够看到div中的数据。请点击图片检查下面的截图..

知道为什么它只给我看`{

这就是我将语言翻译文件从刀片传递到 vue.js...<login v-bind:errormessages = '{!! json_encode(Lang::get("Login")) !!}'></login>的方式，刀片可以做类似的事情来做出反应吗？

标签： reactjslaravellaravel-8