JavaScript React component takes dictionary creates the aside bar with the li 和 link 使用 JSX

Question

我正在学习 React 并在此过程中创建了一个博客，在我的文章中，我想创建一个包含 prop 字典的组件，关键是 link 用户可以看到和单击，值将是我的路由的 link。感谢您的帮助。

import React from 'react'
import styled from 'styled-components'
import { Link } from 'react-router-dom'


function AsideBar(props) {
    return (
        <Container>
            <Sidebar>
                <Nav>
                    {for (const property in props.link_short){
                        <Link='{props.link_short[property]}'><li>property</li></Link>
                    }}
                </Nav>
            </Sidebar>
        </Container>
    )
}

export default AsideBar

Answer 1

您 Link 的格式看起来不正确。缺少 to 且不应使用单引号。

您也不能使用 for 循环来输出 JSX，因为结果需要是 return 值的一部分。相反，map over the object entries

{Object.entries(props.link_short).map(([ text, link ]) => (
  <li>
    <Link to={link}>{ text }</Link>
  </li>
))}

JavaScript React component takes dictionary creates the aside bar with the li 和 link 使用 JSX

JavaScript React component takes dictionary creates the aside bar with the li and link using JSX

javascript

iteration

routes

jsx

reactjs