如何在const中使用冒号

新来的反应,我试图像这样使用冒号(在ProfilePage.js返回之内):

<a class="uk-text">{user.attributes.custom:company_name}</a>

但是它给了我这个错误:

Parsing error: Unexpected token, expected "}"

我正在从AWS Cognito用户池中获取属性,如果将其记录到控制台中,则可以成功看到返回的对象,如下所示:

Object > 

custom:company_name: "apple"

custom:department: "dept"

custom:job_title: "title"

email: "email@me.com"

email_verified: false

family_name: "user"

given_name: "test"

locale: "location"

phone_number: "+18702831861"

phone_number_verified: false

sub: "guid"

I can get the family_name without issue:

<a class="uk-text">{user.attributes.family_name}</a>

但是只要我尝试使用带有冒号的自定义属性,都会引发错误。

完整的ProfilePage.js代码:

import React from "react";
import { API, graphqlOperation } from 'aws-amplify';

class ProfilePage extends React.Component {
  state = {
  };

  componentDidMount() {
    if (this.props.user) {

    }
  }

  render() {
    const { user } = this.props;
    console.log(user.attributes)

    const emailVerified = this.props.user.attributes.email_verified

    const company_name = user.attributes.custom:company_name; // ERROR occurs here

    return (
      <>
      <div class="container">
        <div class="uk-margin-medium-top">
            <ul class="uk-flex-center uk-tab">
                <li class="uk-active"><a>Profile Summary</a></li>
            </ul>
        </div>

        {/* Cards */}
        <div class="uk-section">
        <div class="uk-child-width-1-3@m uk-grid-small uk-grid-match uk-grid">
          <div>
              <div class="uk-card uk-card-default uk-card-body">
                  <h3 class="uk-card-title">User</h3>
                  <p>
                  {/* Form */}
                  <form class="uk-form-stacked">

                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">User ID</label>
                        <div class="uk-form-controls">
                            <a class="uk-text-muted uk-link-reset">{user.attributes.sub}</a>
                        </div>
                    </div>
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">First Name</label>
                        <div class="uk-form-controls">
                            <a class="uk-text">{user.attributes.given_name}</a>
                        </div>
                    </div>
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">Last Name</label>
                        <div class="uk-form-controls">
                          <a class="uk-text">{user.attributes.family_name}</a>
                        </div>
                    </div>
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">Email <a class="uk-label uk-text-link">{emailVerified}</a></label>
                        <div class="uk-form-controls">
                          <input class="uk-input" id="form-stacked-text" type="text" placeholder={user.attributes.email} />
                        </div>
                    </div>
                  </form>
                  </p>
              </div>
          </div>
          <div>
              <div class="uk-card uk-card-primary uk-card-body">
                  <h3 class="uk-card-title">Company</h3>
                  <p>
                  {/* Form */}
                  <form class="uk-form-stacked">
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">Name</label>
                        <div class="uk-form-controls">
                        <a class="uk-text">{company_name}</a>
                        </div>
                    </div>
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">Role</label>
                        <div class="uk-form-controls">
                            <input class="uk-input" id="form-stacked-text" type="text" placeholder="Some text..." />
                        </div>
                    </div>
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">Description</label>
                        <div class="uk-form-controls">
                            <input class="uk-input" id="form-stacked-text" type="text" placeholder="Some text..." />
                        </div>
                    </div>
                  </form>
                  </p>
              </div>
          </div>
          <div>
              <div class="uk-card uk-card-secondary uk-card-body">
                  <h3 class="uk-card-title">Security</h3>
                  <p>
                  {/* Form */}
                  <form class="uk-form-stacked">
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">Change Password</label>
                        <div class="uk-form-controls">
                            <input class="uk-input" id="form-stacked-text" type="text" placeholder="Some text..." />
                        </div>
                    </div>
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">Multi-Factor Authenication</label>
                        <div class="uk-form-controls">
                            <input class="uk-input" id="form-stacked-text" type="text" placeholder="Some text..." />
                        </div>
                    </div>
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">Delete Account</label>
                        <div class="uk-form-controls">
                            <button class="uk-button uk-button-primary">Delete Account Forever</button>
                        </div>
                    </div>
                  </form>
                  </p>
              </div>
          </div>
        </div>
        </div>

      </div>
      </>
    )
  }
}

export default ProfilePage;

I do not even know what this use is called {user.attributes.custom:company_name}, reference to a const? Can someone educate me on what that is named and how do I use a colon within one?

问候