新的反应，我正在尝试像这样使用冒号（在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 protected]"
email_verified: false
family_name: "user"
given_name: "test"
locale: "location"
phone_number: "+18702831861"
phone_number_verified: false
sub: "guid"
我可以毫无问题地获得family_name：
<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;
我什至不知道这种用法叫做{user.attributes.custom:company_name}，是引用const吗？有人可以教育我如何命名以及如何在其中使用冒号吗？
问候
您也可以使用方括号访问对象的属性。
<a class="uk-text">{user.attributes["custom:company_name"]}</a>
由于冒号不是变量（对象属性的有效字符），因为它用于为某些属性设置值），因此必须使用引号将名称引起来来定义/获取值。
希望我正确地解决了问题。