[英]Curly braces as function parameter
I want to pass emailID as the second parameter to.我想将 emailID 作为第二个参数传递给。 Can you help me to understand how to pass additional parameter in Curly braces as a function parameter and how to access it in AccountMenuSidebar.
您能帮我了解如何将花括号中的附加参数作为 function 参数传递,以及如何在 AccountMenuSidebar 中访问它。
Sorry for asking this basic question.I am a newbie to Javascript and React.很抱歉问这个基本问题。我是 Javascript 和 React 的新手。
class Invoices extends Component {
render() {
var emailID="guest@somedomain.com";
const accountLinks = [
{
text: 'Account Information',
url: '/account/user-information',
icon: 'icon-user',
},
{
text: 'Notifications',
url: '/account/notifications',
icon: 'icon-alarm-ringing',
},
];
return (
<section className="ps-my-account ps-page--account">
<div className="container">
<div className="row">
<div className="col-lg-4">
<div className="ps-page__left">
<AccountMenuSidebar data={accountLinks} /> // Want to pass email id as second argument here
</div>
</div>
</div>
</div>
</section>
);
}
}
export default Invoices;
const Accountbar = ({ data }) => (
<aside className="ps-widget--account-dashboard">
<p>{email}</p>
<div className="ps-widget__content">
<ul>
{data.map((link) => (
<li key={link.text} className={link.active ? 'active' : ''}>
<Link href={link.url}>
<a>
<i className={link.icon}></i>
{link.text}
</a>
</Link>
</li>
))}
</ul>
</div>
</aside>
);
export default Accountbar;
<AccountMenuSidebar data={accountLinks} email={emailID} />
and和
const Accountbar = (data , emaildID) => (...
or或者
const Accountbar = (props) => (...
and then you can use props like this...然后你可以使用这样的道具......
<ul>
{props.data.map((link) => (
<li key={link.text} className={link.active ? 'active' : ''}>
<Link href={link.url}>
<a>
<i className={link.icon}></i>
{link.text}
</a>
</Link>
</li>
))}
</ul>
When you pass the props from Invoices
, you usually acces them like this in AccountMenuSidebar
:当您从
Invoices
传递道具时,您通常在AccountMenuSidebar
中像这样访问它们:
<AccountMenuSidebar data={accountLinks} />
const AccountMenuSidebar = (props) => {
return (
<p>{props.data}</p>
)
}
However, using destructuring , which lets you directly unpack variables from an object in JavaScript, you can access the props like this instead:但是,使用destructuring可以直接从 JavaScript 中的 object 中解压缩变量,您可以像这样访问道具:
<AccountMenuSidebar data={accountLinks} />
const AccountMenuSidebar = ({ data }) => {
return (
<p>{data}</p>
)
}
So if you want to send another prop, you can access it the same way, ie所以如果你想发送另一个道具,你可以用同样的方式访问它,即
<AccountMenuSidebar data={accountLinks} email={email} />
const AccountMenuSidebar = (props) => {
return (
<>
<p>{props.data}</p>
<p>{props.email}</p>
</>
)
}
or using destructuring:或使用解构:
<AccountMenuSidebar data={accountLinks} email={email} />
const AccountMenuSidebar = ({ data, email }) => {
return (
<>
<p>{data}</p>
<p>{email}</p>
</>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.