Reactjs 如何在const中使用冒号

react是一个新手，我正在尝试使用类似的冒号（在ProfilePage.js的返回中）：

我正在从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"

我可以毫无疑问地获得

家族名称

：

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

{user.attributes.family\u name}

但每当我尝试使用冒号的自定义属性时，它就会抛出错误

完整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;

从“React”导入React；
从“aws amplify”导入{API，graphqlOperation}；
类ProfilePage扩展了React.Component{
状态={
};
componentDidMount（）{
if（this.props.user）{
}
}
render（）{
const{user}=this.props；
console.log（user.attributes）
const emailVerified=this.props.user.attributes.email\u已验证
const company\u name=user.attributes.custom:company\u name；//此处发生错误
返回(

概况摘要

{/*卡片*/}
使用者

{/*形式*/}
用户ID
{user.attributes.sub}
名字
{user.attributes.given_name}
姓
{user.attributes.family_name}
电子邮件{emailVerified}

公司

{/*形式*/}
名称
{公司名称}
角色
描述

安全

{/*形式*/}
修改密码
多因素认证
删除帐户
永远删除帐户

)
}
}
导出默认配置文件页面；

我甚至不知道这个用法叫什么

{user.attributes.custom:company\u name}

，引用常量？有人能教我这个名字叫什么，以及如何在其中使用冒号吗

---

关于

您也可以使用括号访问对象的属性

{user.attributes[“custom:company_name”]}

由于冒号不是变量、对象属性的有效字符（因为它用于为某些属性设置值），因此必须用引号将名称括起来定义/获取值

---

希望我没弄错。

什么是

const

。请提供更多上下文。另外，您的示例可能是

reactjs

中的一个片段，根据输出不完整，任何试图帮助您的人都将无法复制使用整页代码编辑的？@azbarcea。我不知道{}的名称，它用于引用常量（这只是一个变量吗？），如我的代码中看到的

company\u name

。不管它叫什么名字，我想在其中使用冒号，但不知道如何使用。

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

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;