花括號作為 function 參數

Question

我想將 emailID 作為第二個參數傳遞給。 您能幫我了解如何將花括號中的附加參數作為 function 參數傳遞，以及如何在 AccountMenuSidebar 中訪問它。

很抱歉問這個基本問題。我是 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;

Answer 1

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

和

const Accountbar = (data , emaildID) => (...

或者

const Accountbar = (props) => (...

然后你可以使用這樣的道具......

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

Answer 2

當您從Invoices傳遞道具時，您通常在AccountMenuSidebar中像這樣訪問它們：

<AccountMenuSidebar data={accountLinks} />

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

但是，使用destructuring可以直接從 JavaScript 中的 object 中解壓縮變量，您可以像這樣訪問道具：

<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>
    </>
  )
}