亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 JSON 數據通過 map 動態生成菜單組件?

如何使用 JSON 數據通過 map 動態生成菜單組件?

精慕HU 2022-10-08 17:35:36
我試圖使用從 json 中提取的數據動態創建一組菜單項。我目前正在嘗試通過使用道具映射值來做到這一點,但我在某處失敗了。這是我用來嘗試執行此操作的代碼:Const Generate = () => {  {data.items.map(({id, url, title}) => (     <MenuItem key={id}>       <Link to={url}> {title} </Link>      </MenuItem>))console.log('lol')}}這是試圖利用它的組件。注釋掉的是它在硬編碼時看起來和工作得很好。const Navigation = ({}) => (  <React.Fragment>    <Layout>    <Sider      breakpoint="xs"      collapsedWidth="0"      onBreakpoint={broken => {      }}      onCollapse={(collapsed, type) => {      }}    >      <div className="logo">          <h1 style={{ color: 'white', paddingLeft: 20, paddingTop: 26}}>              {Generate}          </h1>      </div>      <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>        {Generate()}        {/* <Menu.Item key="1">        <Link to="/" > Hjem </Link>        </Menu.Item>        <Menu.Item key="2">        <Link to="/skjema"> Mine Skjema </Link>        </Menu.Item>        <Menu.Item key="3">        <Link to="/pasient"> Mine Pasienter </Link>        </Menu.Item>        <Menu.Item key="4">            S?k        </Menu.Item>        <Menu.Item key="5">            Filtrer        </Menu.Item>   */}      </Menu>    </Sider>    <Layout>      <Header className="site-layout-sub-header-background" style={{ padding: 0 }} />      <Content style={{ margin: '24px 16px 0' }}>        <div className="content">          <Switch>            <Route  exact path={"/"} component={Dashboard} />            <Route  exact path="/Skjema" component={MineSkjema} />            <Route  exact path="/Pasient" component={MinePasienter} />          </Switch>        </div>      </Content>      <Footer />    </Layout>  </Layout>  </React.Fragment>)export default withRouter(Navigation);作為參考,這里是json結構:const data =  {  "items": [    {      "id": 1,      "url": "/",      "title": "Hjem"    },我在哪里犯錯?
查看完整描述

3 回答

?
RISEBY

TA貢獻1856條經驗 獲得超5個贊

嘗試這樣的事情:


<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>

   {data.items.map(({id, url, title}) => (

      <MenuItem key={id}> 

        <Link to={url}> {title} </Link> 

      </MenuItem>

   )}

</Menu>

或者,如果您想使用該函數,請調用它:


const Generate = items =>

  items.map(({id, url, title}) => (

     <MenuItem key={id}> 

        <Link to={url}> {title} </Link>

     </MenuItem>

  )

;

所以: {Generate(data.items)} 傳遞參數是個好主意,因為它使 Generate 成為一個純函數!


查看完整回答
反對 回復 2022-10-08
?
海綿寶寶撒

TA貢獻1809條經驗 獲得超8個贊

.map()當您映射對象列表時,您可能想使用函數,在您的情況下,為什么不嘗試這樣的事情呢?


Const Generate = () => {

  {data.items.map((e,i) => (

    <MenuItem key={i}> 

      <Link to={e.url}> {e.title} </Link> 

    </MenuItem>

   ))}


  }

這應該對你有用。



查看完整回答
反對 回復 2022-10-08
?
米琪卡哇伊

TA貢獻1998條經驗 獲得超6個贊

看起來你有正確的想法。我首先想到Generate的是一個函數,但你從不調用它。相反,您有{Generate}which 直接評估函數對象,而不是它返回的內容。相反,您可能應該擁有{Generate()}.


我建議您通過添加更多console.log()調用來更多地調試您的代碼。閱讀本文以獲取有關調試代碼的更多提示。


我看到的另一個問題是您的Generate()函數的語法:


Const Generate = () => {

  {data.items.map(({id, url, title}) => (

     <MenuItem key={id}> 

      <Link to={url}> {title} </Link> 

     </MenuItem>

))

console.log('lol')}

}

特別是,我認為你有一些額外的牙套。正確的語法應該是這樣的:


const Generate = () => {

  console.log('lol');

  return data.items.map(({id, url, title}) => (

     <MenuItem key={id}> 

      <Link to={url}> {title} </Link> 

     </MenuItem>

  ));

}

只有一組花括號包圍了胖箭頭函數的主體。這里的語法是(<params>) => {<statements>}where<params>是參數<statements>列表,是要執行的語句列表。


在胖箭頭函數中的語句周圍使用花括號時,必須包含return語句才能返回結果。由于該console.log()聲明,這是必要的。如果只有一個語句,則可以刪除花括號,并且單個語句不需要返回:


const Generate = () =>

    data.items.map(({id, url, title}) => (

        <MenuItem key={id}>

            <Link to={url}> {title} </Link>

        </MenuItem>

));


查看完整回答
反對 回復 2022-10-08
  • 3 回答
  • 0 關注
  • 138 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號