Javascript 花括号作为函数参数

我想将emailID作为第二个参数传递给。您能帮助我理解如何在大括号中传递附加参数作为函数参数，以及如何在AccountMenuSidebar中访问它吗

很抱歉问了这个基本的问题。我是Javascript的新手，并会做出反应

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;

class组件{
render（）{
var emailID=”guest@somedomain.com";
常量accountLinks=[
{
文本：“帐户信息”，
url:“/帐户/用户信息”，
图标：“图标用户”，
},
{
文本：“通知”，
url:“/account/notifications”，
图标：“图标报警铃声”，
},
];
返回(

))}                

);
导出默认Accountbar；

或

然后你可以使用像这样的道具

<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>

{props.data.map（（链接）=>(

{link.text}

))}                

当您从

发票

中传递道具时，通常会在

AccountMenuSidebar

中这样存取道具：

<AccountMenuSidebar data={accountLinks} />

const AccountMenuSidebar = (props) => {
  return (
    <p>{props.data}</p>
  )
}

，它允许您直接从JavaScript中的对象解压变量，您可以访问如下的道具：

<AccountMenuSidebar data={accountLinks} />

const AccountMenuSidebar = ({ data }) => {
  return (
    <p>{data}</p>
  )
}


const AccountMenuSidebar=（{data}）=>{
返回(
{data}

)
}

因此，如果你想发送另一个道具，你可以用同样的方式访问它，即

<AccountMenuSidebar data={accountLinks} email={email} />

const AccountMenuSidebar = (props) => {
  return (
    <>
      <p>{props.data}</p>
      <p>{props.email}</p>
    </>
  )
}


const AccountMenuSidebar=（道具）=>{
返回(
{props.data}

{props.email}

)
}

或者使用解构：

<AccountMenuSidebar data={accountLinks} email={email} />

const AccountMenuSidebar = ({ data, email }) => {
  return (
    <>
      <p>{data}</p>
      <p>{email}</p>
    </>
  )
}


const AccountMenuSidebar=（{data，email}）=>{
返回(
{data}

{email}

)
}
我能想到的两种方法。创建一个对象{emailID:..，accountLinks}并将其传递给data。或者在AccountMenuSidebar中添加新参数。示例const{data，emailID}=props
<AccountMenuSidebar data={accountLinks} />

const AccountMenuSidebar = ({ data }) => {
  return (
    <p>{data}</p>
  )
}

<AccountMenuSidebar data={accountLinks} email={email} />

const AccountMenuSidebar = (props) => {
  return (
    <>
      <p>{props.data}</p>
      <p>{props.email}</p>
    </>
  )
}

<AccountMenuSidebar data={accountLinks} email={email} />

const AccountMenuSidebar = ({ data, email }) => {
  return (
    <>
      <p>{data}</p>
      <p>{email}</p>
    </>
  )
}